【Three.js】轨道控制器(OrbitControls)的使用

目录

📝引入

📝使用

📤1、创建轨道控制器

🔧2、交互事件

🚴3、控制物体自动旋转 

🎲4、启用阻尼(惯性) 

🚫5、禁止平移

🚫6、禁止旋转

🌵完全禁止旋转

🌵禁止垂直旋转

🌵禁止水平旋转 

🚫7、禁止缩放 

🌵控制相机缩放范围

🎡8、设置轨道控制器焦点

🌀9、将控制器重置为某个状态 

🍍10、其他方法 


📝引入

轨道控制器可以使得相机围绕目标进行轨道运动。轨道控制器功能不可以通过 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
  });

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值