64. Three.js案例-创建并旋转多个立方体

64. Three.js案例-创建并旋转多个立方体

实现效果

在浏览器中，可以看到两个立方体分别位于场景的不同位置，并且一个立方体持续绕Y轴旋转。

知识点

THREE.WebGLRenderer

用于创建渲染器实例，支持抗锯齿处理。

构造器

THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters.antialias	Boolean	是否启用抗锯齿，默认为false。

方法

• setSize(width, height)：设置渲染器的宽度和高度。
• setClearColor(color, opacity)：设置背景颜色和透明度。

THREE.Scene

表示Three.js中的场景对象，是所有物体的容器。

方法

• add(object)：将对象（如网格、灯光等）添加到场景中。

THREE.PerspectiveCamera

透视相机，模拟人眼视角。

构造器

THREE.PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	垂直视野角度（单位为度）。
aspect	Number	渲染区域的宽高比。
near	Number	近裁剪面的距离。
far	Number	远裁剪面的距离。

属性

• position.set(x, y, z)：设置相机的位置。
• lookAt(vector)：让相机指向特定的方向。

THREE.BoxGeometry

创建立方体几何体。

构造器

THREE.BoxGeometry(width, height, depth)

参数	类型	描述
width	Number	立方体的宽度。
height	Number	立方体的高度。
depth	Number	立方体的深度。

THREE.MeshNormalMaterial

基于法线向量着色的材质，颜色会根据法线方向变化。

THREE.Mesh

将几何体与材质结合，形成可渲染的模型。

方法

• translateX(distance)：沿X轴移动指定距离。
• name：为模型命名，便于后续查找。

requestAnimationFrame

用于动画循环，递归调用 animate() 函数实现动画效果。

function animate() {
   
   
    requestAnimationFrame(animate);
    // 更新对象状态
    renderer.