【14】实战——three.js控制物体移动

本代码示例展示了如何使用Three.js库让一个圆柱体在X轴上进行往返运动。

首先，通过引入Three.js库和相关控制器，创建了一个3D场景，并在其中添加了一个透视相机。相机的视野角度、长宽比、近端面和远端面均被设置以便观看场景。

接着，构建了一个几何体（圆柱体）并添加了基础材质，使其能够在场景中呈现。将此几何体添加到场景中后，初始化了WebGL渲染器，并设置了其尺寸以匹配视口。

为了更好地控制和观察场景中的对象，创建了一个轨道控制器，并添加了一个坐标轴辅助器，以便于理解对象在三维空间中的位置。

在mounted生命周期钩子中，定义了一个renders方法，用于移动几何体并在X轴上产生往返运动效果。当物体的X坐标超出了设定的界限，它会重置其位置。

最后，通过递归调用requestAnimationFrame并绑定renders方法来持续渲染场景，从而创建出动态的往返运动效果。