想要一个three.js的例子并且每一行代码都有详细的解释
时间: 2024-04-06 16:29:28 浏览: 10
好的,以下是一个利用 `three.js` 实现一个立方体旋转的例子,并且每一行代码都有详细的解释。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js Example</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/three.js/r84/three.min.js"></script>
<script>
// 创建一个场景对象
var scene = new THREE.Scene();
// 创建一个相机对象
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个渲染器对象
var renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement);
// 创建一个立方体对象
var geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个绿色的材质对象
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 将几何体和材质对象合并成一个网格对象
var cube = new THREE.Mesh(geometry, material);
// 将立方体对象添加到场景中
scene.add(cube);
// 将相机对象设置到场景中央位置
camera.position.z = 5;
// 创建一个循环函数,用于更新场景中的元素
function animate() {
// 使立方体绕着 Y 轴旋转
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
// 请求浏览器下一帧执行循环函数
requestAnimationFrame(animate);
}
// 调用循环函数
animate();
</script>
</body>
</html>
```
这段代码实现了一个简单的旋转的立方体,以下是每一行代码的解释:
1. 创建一个场景对象: `var scene = new THREE.Scene();`。
2. 创建一个相机对象: `var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);`。这里使用了透视相机,参数分别是视场角度、宽高比、近裁剪面、远裁剪面。
3. 创建一个渲染器对象: `var renderer = new THREE.WebGLRenderer();`。这里使用了 WebGL 渲染器。
4. 设置渲染器的大小: `renderer.setSize(window.innerWidth, window.innerHeight);`。
5. 将渲染器添加到页面中: `document.body.appendChild(renderer.domElement);`。
6. 创建一个立方体对象: `var geometry = new THREE.BoxGeometry(1, 1, 1);`。这里设置了立方体的大小是 1x1x1。
7. 创建一个绿色的材质对象: `var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });`。
8. 将几何体和材质对象合并成一个网格对象: `var cube = new THREE.Mesh(geometry, material);`。
9. 将立方体对象添加到场景中: `scene.add(cube);`。
10. 将相机对象设置到场景中央位置: `camera.position.z = 5;`。
11. 创建一个循环函数,用于更新场景中的元素。这里使用了 `requestAnimationFrame` 方法请求浏览器下一帧执行循环函数,从而实现动画效果。
12. 在循环函数中,使立方体绕着 Y 轴旋转: `cube.rotation.y += 0.01;`。
13. 在循环函数中,渲染场景: `renderer.render(scene, camera);`。
14. 在循环函数中,请求浏览器下一帧执行循环函数: `requestAnimationFrame(animate);`。
15. 调用循环函数: `animate();`。