Three.js+OrbitControls.js實現縮放旋轉
阿新 • • 發佈：2019-01-09
OrbitControls.js實現canvas區域中物體的縮放旋轉
通過對camera進行設定實現
function initCamera(){
//新增一個透視相機
camera = new THREE.PerspectiveCamera(15,
window.innerWidth/window.innerHeight, 1, 1000);
camera.position.z=500;//設定相機位置
camera.position.x=200;
camera.lookAt(new THREE.Vector3(0,0,0));//讓相機指向原點
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.target = new THREE.Vector3(0,0,0);
controls.autoRotate = false;
clock = new THREE.Clock();
}
一開始只寫了 controls = new THREE.OrbitControls(camera,renderer.domElement);
這一條語句，發現並不能實現，後來找了好多案例，終於嘗試到了一個好用的
在上述基礎上新增三條程式碼
controls.target = new THREE.Vector3(0,0,0);
controls.autoRotate = false;
clock = new THREE.Clock();
然後對render函式進行設定
function render(){
delta = clock.getDelta();
controls.update(delta);
requestAnimationFrame(render);
renderer.render(scene, camera);
}
成功！！！