按鈕移動相機THREE.js

我想在我的網站上有單獨的按鈕，並且每個按鈕都將相機移動到不同的位置。我該如何去做這件事。目前，我已經設置了這個功能，當我按下按鈕時，相機會按照我設定的一系列相機位置進行拍攝，但我不知道如何分開這些按鈕，因此每個按鈕都會將相機移動到場景中的其他位置。按鈕移動相機THREE.js

這裏是我目前擁有的代碼：

camera.position.set(100, 0, 400); 
} 

function render() { 
    requestAnimationFrame(render); 

    renderer.render(scene, camera); 
    TWEEN.update(); 
} 

function moveCam() { 

    var pos1 = new TWEEN.Tween(camera.position).to({ 
     y: 300 
    }, 3000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos2 = new TWEEN.Tween(camera.position).to({ 
     x: -400 
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos3 = new TWEEN.Tween(camera.position).to({ 
     y: -10 
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut); 

    var rot1 = new TWEEN.Tween(camera.rotation).to({ 
     y: -1 
    }, 4000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos4 = new TWEEN.Tween(camera.position).to({ 
     x: 600 
    }, 6000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos5 = new TWEEN.Tween(camera.position).to({ 
     y: -400 
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut); 

    var rot2 = new TWEEN.Tween(camera.rotation).to({ 
     y: -5 
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut); 

    var pos6 = new TWEEN.Tween(camera.position).to({ 
     z: 10 
    }, 5000).easing(TWEEN.Easing.Quadratic.InOut); 

    var rot3 = new TWEEN.Tween(camera.rotation).to({ 
     y: 0 
    }, 2000).easing(TWEEN.Easing.Quadratic.InOut); 


    pos1.start(); 
    pos1.chain(pos2); 
    pos2.chain(pos3, rot1) 
    rot1.chain(pos4) 
    pos4.chain(pos5, rot2) 
    rot2.chain(pos6) 
    pos6.chain(rot3)

來源

2016-12-09 Mitch McKain

也許嘗試以下操作：

使用一個補間而不是每個按鈕一個。這樣你就可以確保它們不會干涉：

var positionTween = new TWEEN.Tween(camera.position) 
    .easing(TWEEN.Easing.Quadratic.InOut); 
var rotationTween = new TWEEN.Tween(camera.rotation) 
    .easing(TWEEN.Easing.Quadratic.InOut);

並定義每個按鈕的位置和旋轉的完整形式。所以，如果你定義一個職位，一定要用全部三個組件來定義它。輪換也一樣。如果你沒有指定一個值，它將不會被改變，所以這個位置將取決於相機以前的位置。

在這裏，我使用按鈕ID屬性來檢索位置。所以我假設的按鈕的HTML看起來是這樣的：

<button id="button1" class="camera-button">Position 1</button>

而且JS是：

var buttonCameraSettings = { 
    button1: { 
     position: {x: 1, y: 0, z: 0}, 
     rotation: {x: 0, y: Math.PI, z: 0} 
    }, 
    button2: { 
     // ... 
    } 
};

您現在可以註冊事件處理程序的所有按鈕和查找設置爲按鈕：

var button1 = document.getElementById('button1'); 
button1.addEventListener('click', function(ev) { 
    var buttonId = ev.target.id; 
    var cameraSettings = buttonCameraSettings[buttonId]; 

    updateCameraTweens(cameraSettings); 
});

現在的最後一部分，功能updateCameraTweens是這樣的：

function updateCameraTweens(params) { 
    if (params.position) { 
    positionTween.stop(); 
    positionTween.to(params.position, 1000).start(); 
    } 

    if (params.rotation) { 
    rotationTween.stop(); 
    rotationTween.to(params.rotation, 1000).start(); 
    } 
}

如果每個動畫需要不同的持續時間，那麼也可以將這些數字添加到參數中。

關於旋轉的另一個說明。由於某些數學原因，對camera.rotation中存儲的歐拉角進行動畫製作通常不是最好的辦法。如果對象的四元數是動態的，動畫往往看起來更好。

var quatTween = new TWEEN.Tween(camera.quaternion); 
var toQuaternion = new THREE.Quaternion(); 
var toEuler = new THREE.Eueler(); 

// in updateCameraTweens() 
toEuler.set(rotation.x, rotation.y, rotation.z); 
toQuaternion.setFromEuler(toEuler); 
quatTween.to(toQuaternion, 1000).start();

來源

2016-12-09 10:03:12

這是一個非常棒的迴應，對我的幫助非常大。非常感謝你！ –

thanx這是非常有用的，但你能詳細解釋不同的動畫持續時間嗎？ –

爲了您的場景渲染的汽車，所以只是改變這樣的房間：

HTML：

<button onclick="move()">Move</button>

JS：

function move() 
{ 
    camera.position += 10; 
}

來源

2016-12-09 05:07:57

按鈕移動相機THREE.js

回答

相關問題