1 . OrbitControls.js

控制视口（相机）的平移、缩放、旋转。

1
2
3
4
5
6
7
8
9
10
11
/*OrbitControls轨道控制视口（相机）的平移、缩放、旋转*/
       /*如果 alpha 值不存在，我们也就不可以访问设备的定位事件，这替代了通过摄像头拖拽鼠标的技术*/
       controls = new THREE.OrbitControls(camera, renderer.domElement);
       //controls.target.set(0,0,0);
       controls.target.set(
           camera.position.x,
           camera.position.y,
           camera.position.z - 0.15
       );
       controls.noPan = true;
       controls.noZoom = true;

2 . DeviceOrientationControls.js

监视设备朝向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function setDeviceOrientationControls(e) {
           controls = new THREE.DeviceOrientationControls(camera, true);
           controls.connect();
           controls.update();
           window.removeEventListener('deviceorientation', setDeviceOrientationControls, true);
       }
       window.addEventListener('deviceorientation', setDeviceOrientationControls, true);

       /*在可用设备上，设备朝向事件监听器提供一组 alpha，beta 和 gamma 值。如果没有 alpha 值就不能通过设备朝向进行控制，转而替代的是轨道控制。
        有 alpha 值则使用设备朝向控制摄像头*/
       function setOrientationControls(e) {
           if (!e.alpha) {
               return;
           }
           controls = new THREE.DeviceOrientationControls(camera, true);
           controls.connect();
           controls.update();
           element.addEventListener('click', fullscreen, false);
           window.removeEventListener('deviceorientation', setOrientationControls, true);
       }
       window.addEventListener('deviceorientation', setOrientationControls, true);

3 . StereoEffect.js插件

分屏

1
effect = new THREE.StereoEffect(renderer);

4 . 画布调整和渲染

添加至动画函数中

1
2
3
4
5
6
7
8
9
10
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
effect.setSize(window.innerWidth, window.innerHeight);

//……

controls.update();

effect.render(scene, camera);