Three.js第二课-坐标辅助器&轨道控制器

坐标系

three.js中，坐标系轴默认方位如下

坐标辅助器

• 作用：进行方位的参照
• 介绍：红色X轴，绿色Y轴，蓝色Z轴
• API：AxesHelper
• 参数：辅助线段的长度
• 使用：

// 设置坐标辅助器
const axesHelper=new Three.AxesHelper(6)
// 添加到场景中
scene.add(axesHelper)

• 效果展示

轨道控制器

• 作用：对场景中的物体进行操作控制
• 介绍：旋转，缩放，平移，点击等方式改变相机视角，从而观察场景内物体
• API：OrbitControls
• 导入：从Three.js额外库jsm中部分引入 { OrbitControls }
• 参数1：相机
• 参数2：渲染器节点
• 使用： 导入

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

引入控制器

// 添加轨道控制器
const controls=new OrbitControls(camera,render.domElement)
// 设置滑动阻尼
controls.enableDamping=true
// 设置阻尼系数
controls.dampingFactor=0.05
// 开启自动旋转
controls.autoRotate=true

在渲染函数中更新

// 渲染函数
function animate() {
    // 更新控制器
    controls.update()
    // 使用requestAnimationFrame进行动画的平滑过渡
    requestAnimationFrame(animate)
    // 渲染
    render.render(scene, camera)
}

• 效果展示