cube.rotation.y -= 0.002;
let t0 = new Date() function animate() { controls.update(); let t1 = new Date(); //本次時間 let t = t1 - t0; // 時間差 //camera.translateX(0.001 * t/3) //沿着Y軸旋轉着從大到小 //camera.translateZ(0.001 * t/3) //沿着Z軸由近到遠 camera.rotateY(0.0001 * t/3); //物體的均勻從左到又平移能夠用相機旋轉Y軸來實現 camera.lookAt(scene.position); camera.lookAt與orbitcontrol衝突不能使用,要用下面的controls.target代替 //controls.target = new THREE.Vector3(0,-100,0); renderer.render(scene, camera); requestAnimationFrame(animate); }
雖然上面已經設置了相機的rotateY與lookAt,可是lookAt並無效果?javascript
緣由是因爲引用了OrbitControls控件,相機的lookAt 被OrbitControls控件更改了。java
camera.lookAt()代碼要使用 controls.target = new THREE.Vector3(0,-100,0);來替換,就能夠更改你想要的視角。可是相機的旋轉怎麼處理呢?dom
控制器有自帶的旋轉設置spa
controls = new THREE.OrbitControls(camera, renderer.domElement); controls.autoRotate = true;
controls有點像咱們的相機。在設置了controls.autoRotate = true; 以後,其實咱們並不須要controls.target = new THREE.Vector3(0,-100,0);code
camera.translateX(0.001 * t/3) //沿着Y軸旋轉着從大到小 camera.translateZ(0.001 * t/3) //沿着Z軸由近到遠 camera.rotateY(0.0001 * t/3); //物體均勻的從左到右平移