学习Three.js——移动摄像机(control)

一般使用控制器来控制移动的摄像机，控制器一般有几类。

轨迹球控制器

		//将camera放入控制器的构造函数中
		var trackballControls = new THREE.TrackballControls(camera);

        trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.0;
        trackballControls.panSpeed = 1.0;

		//使用clock更新摄像机
		function render() {
            stats.update();
            var delta = clock.getDelta();
            trackballControls.update(delta);
            
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera)
        }

飞行控制器/翻滚控制器

用法差不多，这里给出定义的部分

		var flyControls = new THREE.FlyControls(camera);

        flyControls.movementSpeed = 25;
        flyControls.domElement = document.querySelector("#WebGL-output");//注意这里要和dom场景绑定
        flyControls.rollSpeed = Math.PI / 24;
        flyControls.autoForward = true;
        flyControls.dragToLook = false;

第一视角控制器

		var camControls = new THREE.FirstPersonControls(camera);
        camControls.lookSpeed = 0.4;
        camControls.movementSpeed = 20;
        camControls.noFly = true;
        camControls.lookVertical = true;
        camControls.constrainVertical = true;
        camControls.verticalMin = 1.0;
        camControls.verticalMax = 2.0;
        camControls.lon = -150;
        camControls.lat = 120;

轨道控制器

摄像机像地球围绕太阳公转一样沿着一个轨迹公转

var orbitControls = new THREE.OrbitControls(camera);
orbitControls.autoRotate = true;