ThreeJS:坐标辅助器与轨道控制器

是席木木啊2024-05-03 22:03

ThreeJS与右手坐标系

使用ThreeJS创建3D场景时，需要使用一个坐标系来定位和控制对象的位置和方向。

ThreeJS使用的坐标系是右手坐标系，即：X轴向右、Y轴向上、Z轴向前，如下图所示，
ThreeJS-右手坐标系

Tips：右手坐标系下的右手规则是指，将右手伸出，并将大拇指方向指向X轴的正方向，食指指向Y轴的正方向，中指指向Z轴的正方向。

添加坐标辅助器

ThreeJS提供了AxesHelper类，用于简单模拟3个坐标轴的对象，其中：红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

为了方便指示当前场景的坐标轴朝向，可以向场景添加AxesHelper坐标辅助器。

使用坐标辅助器

javascript 复制代码

//TODO:创建坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

坐标辅助器效果

添加轨道控制器

轨道控制器是ThreeJS提供的一个非常实用的工具，它可以帮助用户更加轻松的探索3D场景------通过鼠标或者触摸屏交互的方式，实现3D场景的平移、旋转、缩放操作，从而改变相机的观察视角。

使用轨道控制器

ThreeJS提供了Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。

javascript 复制代码

//TODO:轨道控制器
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.update();

在循环渲染函数中，调用update()方法，更新渲染器，

javascript 复制代码

//TODO:渲染函数
function animate() {
  requestAnimationFrame(animate);
  //TODO:更新轨道控制器
  orbitControls.update();
  //TODO:渲染
  renderer.render(scene, camera);
}

注意点：更改相机视角之后，必须手动调用update方法更新控制器。

轨道控制器效果

通过鼠标修改相机视角，

设置轨道控制器的属性

OrbitControls轨道控制器包含很多属性，通过设置属性，可以限定可平移、旋转、缩放的范围，以及阻尼效果、阻尼系数、自动旋转、自动旋转系数等。