跳到主要内容

坐标辅助器&轨道控制器

坐标辅助器(AxesHelper),用于显示坐标轴。

X 是红色,Y 是绿色,Z 是蓝色。

辅助记忆:X 战警杀人流红色的血,Y 型树枝上长满绿色的叶子,Zoom 应用的图标是蓝色的。

添加坐标轴:

// 添加坐标轴
const axes = new THREE.AxesHelper(5)
scene.add(axes)

Axes

轨道控制器(OrbitControls),用于控制相机。

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

// 添加轨道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement)

可以添加一些轨道控制器的配置:

// 设置阻尼
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05
// 设置旋转速度
controls.autoRotate = true

Orbit Controls

本节示例代码:示例代码:https://github.com/wukaipeng-dev/threejs-demo/blob/main/02-basic/src/main-axes%26controls.ts

Three.js 的坐标系的演变(个人猜想): 2D 坐标系: The 2D coordinate system 3D 坐标系:

The 3D coordinate system