目录
📝引入
轨道控制器可以使得相机围绕目标进行轨道运动。轨道控制器功能不可以通过 three 模块来直接访问,需要从 example/jsm 子目录下导入。
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
📝使用
📤1、创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
🌿第一个参数:(必须)将要被控制的相机。该相机不允许是其他任何对象的子级,除非该对象是场景自身。
🌿第二个参数:用于事件监听的HTML元素。
后续也可以通过 controls.object = camera 以及 controls.domElement = renderer.domElement 进行设置。
🔧2、交互事件
change:在用户与控制器进行交互时持续触发,比如当用户拖拽鼠标或触摸屏时。
start:当用户开始与控制器进行交互时触发,比如当用户开始拖拽鼠标或触摸屏时。
end:当用户停止与控制器进行交互时触发,比如当用户释放鼠标或触摸屏时。
应用场景:可以在用户与控制器交互的时候暂停动画,在停止交互的时候再重新启动动画,以提高性能,也可以确保用户交互不会干扰其他动作。
// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 更新控制器 必须在摄像机的变换发生任何手动改变后调用
controls.update()
/*创建几何体*/
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1) //几何体对象
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }) //材质
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial) //根据几何体和材质创建物体
// 将几何体添加到场景当中
scene.add(cube)
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
// 声明一个变量来跟踪动画状态
let isAnimationPaused = false
// 循环渲染
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
if(!isAnimationPaused){
cube.rotation.x += 0.01
cube.rotation.y += 0.01
}
}
animate()
controls.addEventListener('change', function (event) {
console.log('change');
// 暂停动画
isAnimationPaused = true
});
controls.addEventListener('start', function (event) {
console.log('start');
});
controls.addEventListener('end', function (event) {
console.log('end');
// 恢复动画
isAnimationPaused = false
});


最低0.47元/天 解锁文章
675

被折叠的 条评论
为什么被折叠?



