ThreeJS从实战到源码 - 鼠标操控3D场景

先实现一个

实现代码

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

代码解析

OrbitControls.js控件支持鼠标左中右键操作和键盘方向键操作，相应更改一下代码：renderer.render(scene,camera);即可。

OrbitControls.js 控件提供了一个构造函数。THREE OrbitControls()，一个相机对象作为参数，执行代码new THREE。轨道控制(相机，渲染器。DomElement相应)，浏览器会自动检测鼠标和键盘的变化，根据鼠标和键盘的变化更新摄像机对象的参数。

如拖动鼠标左键，浏览器会检测鼠标事件，鼠标的距离按照一定的算法翻译成相机的旋转的角度来看，你可以联系生活来看照片，你的相机拍摄角度发生了变化，自然渲染器渲染出的结果就变化了，通过定义监听事件。

addEventListener (' change '， render)，如果你持续操作鼠标，相机的参数改变，render()会被反复调用，所以Threejs会渲染相机的新位置或角度数据。

浏览器同时做两件事。首先，它为浏览器定义了鼠标和键盘事件，该事件会自动检测鼠标和键盘的变化，并在它们发生变化时自动更新摄像头数据。每当鼠标或键盘改变时，渲染函数就会被触发。

场景操作

• 缩放：滚动—鼠标中键
• 旋转：拖动—鼠标左键
• 平移：拖动—鼠标右键

常用类库

OrbitControls.js

这组控件执行轨道、旋转(缩放)和平移。

不像TrackballControls，它维护“up”方向对象。up(默认为+Y)。

Orbit -鼠标左键/触摸:一指移动

缩放-中鼠标，或鼠标滚轮/触摸:两指伸展或压扁

平移鼠标右键，或鼠标左键+ ctrl/meta/shiftKey，或方向键/触摸:两指移动

MapControls.js

这组控件执行轨道、旋转(缩放)和平移。

不像TrackballControls，它维护“up”方向对象。up(默认为+Y)。

这非常类似于OrbitControls，另一组触摸行为

Orbit -右鼠标/触摸:两指旋转

缩放-中鼠标，或鼠标滚轮/触摸:两指伸展或压扁

移动鼠标左键或方向键/触摸:一指移动

TrackballControls.js

TrackballControls类似于OrbitControls。然而，它并不保持一个恒定的摄像机向上向量。这意味着摄像机可以绕过它的极值。保持正确的一面朝上是不会翻转的。

体验地址 https://ithanmang.gitee.io/threejs/home/201809/20180903/01-TrackballControls.html