关于javascript:Threejs教程鼠标操作三维场景

5次阅读

共计 1817 个字符，预计需要花费 5 分钟才能阅读完成。

举荐：将 NSDT 场景编辑器退出你 3D 工具链
其余工具系列：NSDT 简石数字孪生
为了应用鼠标操作三维场景，能够借助 three.js 泛滥控件之一 OrbitControls.js，能够在下载的 three.js-master 文件中找到(three.js-master\examples\js\controls)。而后和引入 three.js 文件一样在 html 文件中引入控件 OrbitControls.js。本节课的目标不是为了深刻解说 OrbitControls.js，次要目标一方面向大家展现下 threejs 的性能，另一方面前面课程学习过程中常常会通过鼠标旋转、缩放模型进行代码调试。

OrbitControls.js 控件反对鼠标左中右键操作和键盘方向键操作，具体代码如下，应用上面的代码替换 1.1 节中 renderer.render(scene,camera); 即可。

function render() {renderer.render(scene,camera);// 执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);// 创立控件对象
controls.addEventListener('change', render);// 监听鼠标、键盘事件

OrbitControls.js 控件提供了一个构造函数 THREE.OrbitControls()，把一个相机对象作为参数的时候，执行代码 new THREE.OrbitControls(camera,renderer.domElement)，浏览器会自动检测鼠标键盘的变动，并依据鼠标和键盘的变动更新相机对象的参数，比方你拖动鼠标左键，浏览器会检测到鼠标事件，把鼠标平移的间隔依照肯定算法转化为相机的的旋转角度，你能够分割生存中相机拍照, 即便风物没有变动，你的相机拍摄角度产生了变动，天然渲染器渲染出的后果就变动了，通过定义监听事件 controls.addEventListener(‘change’, render)，如果你间断操作鼠标，相机的参数不停的变动，同时会不停的调用渲染函数 render()进行渲染，这样 threejs 就会应用相机新的地位或角度数据进行渲染。

执行构造函数 THREE.OrbitControls()浏览器会同时干两件事，一是给浏览器定义了一个鼠标、键盘事件，自动检测鼠标键盘的变动，如果变动了就会自动更新相机的数据，执行该构造函数同时会返回一个对象，能够给该对象增加一个监听事件，只有鼠标或键盘产生了变动，就会触发渲染函数。对于监听函数 addEventListener 介绍能够关注文章《HTML5 事件》。

滚动—鼠标中键旋转：拖动—鼠标左键平移：拖动—鼠标右键 requestAnimationFrame()应用状况如果 threejs 代码中通过 requestAnimationFrame()实现渲染器渲染办法 render()的周期性调用，当通过 OrbitControls 操作扭转相机状态的时候，没必要在通过 controls.addEventListener(‘change’, render)监听鼠标事件调用渲染函数，因为 requestAnimationFrame()就会不停的调用渲染函数。

function render() {renderer.render(scene,camera);// 执行渲染操作
  // mesh.rotateY(0.01);// 每次绕 y 轴旋转 0.01 弧度
  requestAnimationFrame(render);// 申请再次执行渲染函数 render
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);// 创立控件对象
// 曾经通过 requestAnimationFrame(render); 周期性执行 render 函数，没必要再通过监听鼠标事件执行 render 函数
// controls.addEventListener('change', render)

留神开发中不要同时应用 requestAnimationFrame()或 controls.addEventListener(‘change’, render)调用同一个函数，这样会抵触。

3D 建模学习工作室

正文完