关于编辑器:Threejs教程鼠标操作三维场景

举荐：将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)调用同一个函数，这样会抵触。