ボタン移動カメラTHREE.js

Question

私は自分のウェブサイトに別々のボタンを持っていて、それぞれのボタンはカメラを別の位置に動かします。これをどうやって行うのですか？現在のところ、私はボタンを押すと、私が設定した一連のカメラ位置に従うように設定していますが、これらのボタンを分ける方法はわかりませんので、各ボタンがカメラをシーン内の別の場所に移動させます。

HTML：：

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

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) 

Answer 1

次のように試してみてください。

ボタンごとに1つではなく1つのトゥイーンを使用してください。

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

をそして、彼らの完全な形でのボタンのそれぞれの位置と回転を定義します。この方法は、あなたは彼らが干渉しないことを確認することができます。したがって、ポジションを定義する場合は、常に3つのコンポーネントすべてでポジションを定義します。同じことが回転のために行く。値を指定しないと、変更されないため、カメラの位置によって位置が変わります。

ここでは、ボタンのid属性を使用して位置を取得しています。

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

そして、JSは、次のようになります：だから私は、ボタンのHTMLは次のようになりますと仮定してい

あなたは今、すべてのボタンのイベントハンドラを登録し、設定を検索することができます

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(); 

Answer 2

が自動レンダリングである：ここでは

は、私が現在持っているコードです

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