threejs Notes 03 -- 轨道控制器
threejs扩展控件 OrbitControls.js
可以使用鼠标对场景进行操作，比如旋转场景，移动场景，对场景进行缩放;
var controls = new THREE.OrbitControls(camera, renderer.domElement);
定义一个轨道控制器，要想使轨道控制器生效，必须循环渲染场景 requestAnimationFrame
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// 渲染函数
function render() {
controls.update()
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render)
}
render();
控制器提供几个方法
- addEventListener
- dispatchEvent
- hasEventListener
- removeEventListener
addEventListener
监听方法，接受两个参数 type、listener
controls.addEventListener('change', changeControls)
function changeControls(event) {
console.log(camera.position)
}
轨道控制是用来控制相机，使相机进行轨道运动，所以可以在监听的函数中随时查看相机的位置信息
removeEventListener
用来移除监听事件
controls.addEventListener('change', changeControls, false)
function changeControls() {
console.log(event.type)
}
setTimeout(()=>{
controls.removeEventListener('change', changeControls)
},5000)
监听的type除了change，还可以监听开始(star)时，和结束(end)时，具体可以看一下控制器的 源码
var scope = this;
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
也可以监听controls.document
controls.domElement.addEventListener( 'mousedown', onMouseDown, false );
function onMouseDown(){
console.log(event)
}
其他两个平时没用到，源码中有应用到，是调用reset方法和update方法派发事件，还有待探索
从动图中可以看出，左键旋转和右键移动event.type都是mousemove，缩放event.type是wheel
从打印出的日志可以看出来进行了什么操作，一会限制操作的时候会起到作用 官网案例 官网提供了很多api，一起来看一看
autoRotate
.autoRotate : Boolean
将其设为true，以自动围绕目标旋转。
请注意，如果它被启用，你必须在你的动画循环里调用.update()。
这个api主要是可以自动让场景进行旋转，可以控制旋转速度
.autoRotateSpeed : Float
当 .autoRotate : Boolean为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一次需要30秒。
请注意，如果 .autoRotate : Boolean被启用，你必须在你的动画循环里调用.update()。
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// console.log(controls)
controls.addEventListener('change', changeControls)
function changeControls(event) {
console.log(event.type)
}
controls.autoRotate = true // 启用自动旋转
controls.autoRotateSpeed = 10
// 渲染函数
function render() {
renderer.render(scene, camera); //执行渲染操作
controls.update() //更新控制器
requestAnimationFrame(render)
}
render();
阻尼惯性
enableDamping
将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。
请注意，如果该值被启用，你将必须在你的动画循环里调用.update()。
dampingFactor
当 .enableDamping : Boolean设置为true的时候，阻尼惯性有多大。
请注意，要使得这一值生效，你必须在你的动画循环里调用.update()。 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。 请注意，如果该值被启用，你将必须在你的动画循环里调用.update()。
controls.enableDamping = true
controls.dampingFactor = 0.1
略微有一点丝滑的感觉，鼠标旋转到一定角度松开后模型会继续“滑行”一段距离，控制台也是一直在打印
按键
enableKeys
启用或禁用键盘控制。
controls.enableKeys = true // default true
keys:
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。
controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}
keyPanSpeed
当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。
controls.keyPanSpeed = 7
三者代码
controls.addEventListener('change', changeControls)
function changeControls() {
console.log(event.keyCode)
}
// controls.enableDamping = true
// controls.dampingFactor = 0.1
controls.enableKeys = true
controls.keyPanSpeed = 7
controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}
有一个现象，在按下左箭头的时候，场景往右移动，本以为是哪里写错了， 反过来一想，轨道控制器是控制相机位置的，所以是相机向左边移动了7像素，场景自然向左边移动了
各种控制器禁用
enabled
控制器是否被启用。
enablePan
启用或禁用摄像机平移，默认为true。
enableRotate
启用或禁用摄像机水平或垂直旋转。默认值为true。 请注意，可以通过将polar angle或者azimuth angle 的min和max设置为相同的值来禁用单个轴， 这将使得水平旋转或垂直旋转固定为所设置的值。
enableZoom
启用或禁用摄像机的缩放。
以上各种禁用 只改一下值就可以生效，不赘述
各种操作的角度限制
旋转角度
maxAzimuthAngle
水平旋转的角度的上限
minAzimuthAngle
水平旋转的角度的下限
minPolarAngle
垂直旋转的角度的下限
maxPolarAngle
垂直旋转的角度的上限
缩放限制
.minZoom
你能够将相机放大多少 ( 仅适用于OrthographicCamera ) ，其默认值为0。
.maxZoom
你能够将相机缩小多少 ( 仅适用于OrthographicCamera only ) ，其默认值为Infinity。 .zoomSpeed
摄像机缩放的速度，其默认值为1。 Speed of zooming / dollying. Default is 1.
controls.maxZoom = 2
controls.minZoom = 0.6
controls.zoomSpeed = 2
具体放大系数，可以通过addeventListener监听并访问camera.zoom
controls.addEventListener("change", changeControls);
function changeControls() {
// console.log(event.type);
console.log('放大值', camera.zoom)
}
移动限制
.minDistance
你能够将相机向内移动多少（仅适用于PerspectiveCamera），其默认值为0。
.maxDistance : Float
你能够将相机向外移动多少（仅适用于PerspectiveCamera），其默认值为Infinity。
这相当于透视相机的缩放控制，效果基本等同于正交相机的zoom
演示时用的是 OrthographicCamera 正交相机，使用移动限制需要使用 PerspectiveCamera 透视相机
创建一个透视相机
var Pcamera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
Pcamera.position.set(500, 100, 500); //设置相机位置
scene.add(Pcamera);
修改渲染函数中被渲染的相机
// 渲染函数
function render() {
renderer.render(scene, Pcamera); //执行渲染操作
controls.update();
requestAnimationFrame(render);
}
修改控制器控制的相机
var controls = new THREE.OrbitControls(Pcamera, renderer.domElement);
// 设置控制器的移动限制
controls.maxDistance = 250
controls.minDistance = 150
各种速度
.panSpeed : Float
位移的速度，其默认值为1。
.rotateSpeed : Float
旋转的速度，其默认值为1.
.zoomSpeed : Float
摄像机缩放的速度，其默认值为1。 Speed of zooming / dollying. Default is 1.
mouseButtons
这一对象包含了对用于控制的鼠标按钮的引用。
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
左键旋转，右键移动，滚轮缩放，也可以将LEFT和RIGHT的值换一下，右键旋转，左键移动
screenSpacePanning
定义当平移的时候摄像机的位置将如何移动。如果为true，摄像机将在屏幕空间内平移。 否则，摄像机将在与摄像机向上方向垂直的平面中平移。其默认值为false。
let btn = document.getElementById("btn");
if (btn) {
btn.onclick = function () {
controls.screenSpacePanning = true;
};
}
target
控制器的焦点，.object的轨道围绕它运行。 它可以在任何时候被手动更新，以更改控制器的焦点。
let btn = document.getElementById("btn");
if (btn) {
btn.onclick = function () {
let v3 = new THREE.Vector3(0, 0, 0);
setInterval(()=>{
if(v3['y']<50){
controls.target = v3.setY(v3.y+=1)
}
}, 50)
};
}
用setInterval可以看到具体移动变化，threejs支持tween.js动画，也可以支持骨骼动画，帧动画等，效果会比setInterval好很多
保存和重置
this.saveState = function () {
scope.target0.copy( scope.target );
scope.position0.copy( scope.object.position );
scope.zoom0 = scope.object.zoom;
}
this.reset = function () {
scope.target.copy( scope.target0 );
scope.object.position.copy( scope.position0 );
scope.object.zoom = scope.zoom0;
scope.object.updateProjectionMatrix();
scope.dispatchEvent( changeEvent );
scope.update();
state = STATE.NONE;
};
源码中,保存是将target、相机的position、相机的zoom拷贝下来，重置的时候再将这些值赋值给控制器并更新控制器
应用代码：
let save = document.getElementById("save");
let reset = document.getElementById("reset");
if(save && reset){
save.onclick = function (){
controls.saveState()
}
reset.onclick = function (){
controls.reset()
}
}
在保存或者重置时可以单独设置target
target0
由 .saveState : saveState和 .reset : reset方法在内部使用。
zoom0
由 .saveState : saveState和 .reset : reset方法在内部使用。****
position0
由 .saveState : saveState和 .reset : reset方法在内部使用。
dispose
移除所有的事件监听。
this.dispose = function () {
scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
scope.domElement.removeEventListener( 'wheel', onMouseWheel, false );
scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
scope.domElement.removeEventListener( 'keydown', onKeyDown, false );
//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
};
取消了所有的监听后，鼠标，键盘等事件对控制器无效 效果相当于禁用控制器
function onMouseDown( event ) {
if ( scope.enabled === false ) return;
// Prevent the browser from scrolling.
event.preventDefault();
......
这是部分事件监听方法，如果控制器禁用，就return出去
获取旋转角度
.getAzimuthalAngle () : radians
获得当前的水平旋转，单位为弧度。
.getPolarAngle () : radians
获得当前的垂直旋转，单位为弧度。
controls.addEventListener("change", changeControls);
function changeControls() {
let azimuthal = controls.getAzimuthalAngle ()
console.log('polar', azimuthal);
let polar = controls.getPolarAngle ()
console.log('polar', polar);
}
——学习郭龙邦threejs视频整理
有一起学习的小伙伴，可以留言、关注一起探讨threejs