threejs 相機旋轉

1、實現物體的轉動有2種方法

(1)物體自己的轉動

cube.rotation.y -= 0.002;

(2)相機的轉動通常是圍繞着世界座標的Y軸,並設置相機的lookAt(new THREE.Vector3(0,-100,0))

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

2、相機的旋轉和移動,使咱們能夠作不少有趣的效果

camera.translateX(0.001 * t/3) //沿着Y軸旋轉着從大到小
camera.translateZ(0.001 * t/3) //沿着Z軸由近到遠

camera.rotateY(0.0001 * t/3); //物體均勻的從左到右平移
相關文章
相關標籤/搜索