學習Three.js——移動攝像機(control)
阿新 • • 發佈:2018-12-23
一般使用控制器來控制移動的攝像機,控制器一般有幾類。
軌跡球控制器
//將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;