以下是一篇介绍 HTML 代码和 Three.js 的三维旋转手机代码示例：
<!DOCTYPE html>
<html>
<head>
<title>三维旋转手机</title>
<meta charset="UTF-8">
<meta name="description" content="用 Three.js 创建一个旋转的三维手机">
<meta name="author" content="Bob">
<script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建正方体
const geometry = new THREE.BoxGeometry(1.5, 3, 0.5);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);
// 渲染场景
function animate() {
requestAnimationFrame(animate);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>上面的代码用 Three.js 创建了一个简单的三维旋转手机场景，包含了以下 HTML 元素和 Three.js 代码元素：
- `<script>`: 在 HTML 中嵌入 JavaScript 代码的元素。
- `const`: 声明一个常量。
- `new THREE.Scene()`: 创建一个 Three.js 场景，将其中的物体添加到其中。
- `new THREE.PerspectiveCamera()`: 创建一个 Three.js 透视相机。
- `new THREE.WebGLRenderer()`: 创建一个 Three.js WebGL 渲染器。
- `new THREE.BoxGeometry()`: 创建一个立方体。
- `new THREE.MeshBasicMaterial()`: 创建了一个用于添加到 Mesh 的 Basic Material，代表使用一种固定颜色的材质。
- `new THREE.Mesh()`: 创建了一个 Mesh 物体。
- `new THREE.PointLight()`: 创建了一个 Three.js 点光源。
- `requestAnimationFrame()`: 请求浏览器执行一次动画帧，用于循环渲染场景。
- `cube.rotation.y`: 改变立方体物体的旋转。
HTML 页面中使用了内联 JavaScript，通过创建 Three.js 场景、相机、渲染器、物体和光源，以及添加旋转动画，来创建一个简单的旋转的三维手机场景。其中，通过 CSS 样式设置了页面的样式，去除了默认的滚动条。