THREE.js----01

THREE.js----02

上次我们写到可以让物体进行旋转,今天给大家介绍下如何通过鼠标让视角随着鼠标转动而转动,需要在给物体在加上轨道，也就是OrbitControls 官网地址

简单的使用

// 添加轨道其实就是相当于把相机放在了一个滑轨上，可以360度的去观看 
let orbitControls = new OrbitControls(camera,renderer.domElement) 
// 1. 相机，让具体哪一个相机围绕目标运动。默认目标是原点。立方体在原点处。 
// 2. 渲染的画布dom对象，用于监听鼠标事件控制相机的围绕运动

添加坐标系

还可以给我们得场景添加一个坐标系,方面我们调试动画或位置

// 添加坐标 
AxesHelper const axesHelper = new THREE.AxesHelper( 5 ); 
// 坐标系添加到场景当中
scene.add(axesHelper)

添加之后的效果

循环渲染环境

定义一个轨道控制器，要想使轨道控制器生效，必须循环渲染场景 requestAnimationFrame

var controls = new THREE.OrbitControls(camera, renderer.domElement); // 渲染函数 
function render() {
    controls.update() //控制器更新函数
    renderer.render(scene, camera); //执行渲染操作 
    requestAnimationFrame(render) 
} 
render();

mouseButtons

这一对象包含了对用于控制的鼠标按钮的引用。

controls.mouseButtons = { 
    LEFT: THREE.MOUSE.ROTATE, 
    MIDDLE: THREE.MOUSE.DOLLY, 
    RIGHT: THREE.MOUSE.PAN 
}

获取旋转角度

.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); 
}