网格辅助

GridHelper：用于显示网格辅助

const gridHelper = new THREE.GridHelper(30, 30, 0xff0000);
scene.add(gridHelper);

坐标辅助

// 坐标辅助，绿色Y轴，红色X轴，蓝色Z轴
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

轨道控制器

使用方式：

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
const controls = new OrbitControls(camera, renderer.domElement)

注意：最好配合动画函数，不然需要手动渲染

惯性

// 是否开启惯性
controls.enableDamping = true;
// 阻尼惯性有多大
controls.dampingFactor = 0.05;
// 是否自动旋转
controls.autoRotate = true
// 围绕目标旋转的速度
controls.autoRotateSpeed = 0.05
// 禁用缩放
controls.enableZoom = false
// 禁止拖动
controls.enablePan = false
// 禁止移动
controls.enableRotate = false

// 必须在动画循环里调用.update()
controls.update()

相机位置和视角切换

// 更新相机位置
new TWEEN.Tween(camera.position)
  .to(
    {
      x: cameraPosition[item * 6],
      y: cameraPosition[item * 6 + 1],
      z: cameraPosition[item * 6 + 2],
    },
    4000
  )
  .easing(TWEEN.Easing.Exponential.InOut)
  .start();
new TWEEN.Tween(controls.target)
  .to(
    {
      x: cameraPosition[current * 6 + 3],
      y: cameraPosition[current * 6 + 4],
      z: cameraPosition[current * 6 + 5],
    },
    4000
  )
  .easing(TWEEN.Easing.Exponential.InOut)
  .start();