【2-入门与调试设置】1.坐标辅助器与轨道控制器

前言

快速入门开发三维场景时，坐标辅助器和轨道控制器是关键工具。坐标辅助器通过线段形式显示世界坐标系，帮助开发者明确物体位置。而轨道控制器则通过监听页面事件，如鼠标滚轮和滑动，控制相机旋转、缩放和平移，并可实现带阻尼的平滑运动。此外，控制器支持自定义属性，如自动旋转和监听事件对象，以更灵活地控制三维场景。

坐标辅助器的使用

当我们在 three.js 中创建 3D 场景时，我们需要使用一个坐标系来定位和控制对象的位置和方向。three.js 使用的坐标系是右手坐标系，这意味着 X 轴向右，Y 轴向上，Z 轴指向屏幕外。

在右手坐标系中，我们可以使用右手规则来确定一个向量的方向。右手规则指的是，将右手伸出，并将大拇指指向 X 轴的正方向，食指指向 Y 轴的正方向，中指指向 Z 轴的正方向。这样，我们就可以通过确定三个轴的正方向来确定一个向量的方向。

在官网搜索打开 AxesHelper 类官方文档

坐标辅助器显示 X、Y、Z 三个轴，红色为 X 轴，绿色为 Y 轴，蓝色为 Z 轴。

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

轨道控制器的使用

轨道控制器用于控制相机的位置和方向，实现拖动、旋转和缩放等操作。 2.在 Three.js 模块中导入轨道控制器，通过 new 创建控制器实例。 3.轨道控制器监听页面事件，如鼠标滚轮滚动，实现相机的旋转和缩放。 4.可以设置阻尼系数，使相机移动具有惯性，看起来更自然。 5.可以设置自动旋转和旋转速度，通过监听 body 事件实现全局控制。 6.禁用旋转、平移和缩放功能，以更好地控制相机。

官网搜索打开 OrbitControls 类官方文档可以查看到轨道控制器的属性和方法，如何使用。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

controls = new OrbitControls(camera, renderer.domElement)
// 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感
controls.enableDamping = true
// 当.enableDamping设置为true的时候，阻尼惯性有多大，默认0.05 值越大，阻尼越大，惯性越小
controls.dampingFactor = 0.05
// 当controls对象状态改变时触发的事件 调试输出controls的位置和目标信息
controls.addEventListener('change', function () {
	console.log(controls.object.position, camera.position)
	console.log(controls.target)
})

function animate() {
	requestAnimationFrame(animate)
	controls.update()
	renderer.render(scene, camera)
}