【Threejs】从零开始（二）--控制器和辅助坐标系

最新推荐文章于 2025-04-24 09:22:53 发布

原创最新推荐文章于 2025-04-24 09:22:53 发布 · 231 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #学习

threejs学习专栏收录该内容

11 篇文章

订阅专栏

在上一节我们得到了一个不断旋转的三维立方体，但是我们不能进行控制视角，我们怎么可以通过控制鼠标去观察不同方位。这个时候我们就需要引入控制器：

1.控制器

（1）导入轨道控制器

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'  // 导入轨道控制器

（2）添加轨道控制器

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

可以对轨道控制器进行一些参数设置

controls.enableDamping = true; // 开启阻尼
controls.dampingFactor = 0.02; // 设置阻尼系数
controls.autoRotate = true; // 开启自动旋转

（3）应用

function render() {
  //如果后期需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入controls.update()
  controls.update()
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

2.坐标辅助器

可以帮助我们更好理解三维物体所处的方位，添加起来很简单

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

这样我们就得到了一个可以控制方向带有坐标的三维物体