1. 程式人生 > >學習Three.js——移動攝像機(control)

學習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;