three.js - マウスをクリックするとカメラの位置を切り替える方法は？

Question

私はthree.jsでかなり新しいので、この質問がちょっと混乱しているようであればごめんなさい。

私はすでにthree.jsでシーンを設定していますが、カメラの位置を点Aから点Bにスムーズに移動させたいと思います（私のコードでAとBの位置を指定します）。 Tween.jsを使用してカメラのアニメーションを簡単にするために、これを行うと思います。

マウスの左ボタンをクリックするたびにカメラの位置が変わるようにしたい。基本的にカメラの位置は、マウスの左ボタンがシーンのどこかをクリックされるたびに、ポジションAからポジションBに切り替わります。

しかし、私はこのようなものを複製する方法もわかりません。私は、マウスが押されるたびに位置を変更する方法についてのチュートリアルを見つけましたが、マウスをクリックするたびに固定位置で前後に位置を切り替えるものはありません。私はこれをするかどうかわからない私のコードの関数render（）セクションでは、マウスがカメラの位置を変更するためにクリックされた場合は、私はそれがあまりにも簡単だろうと思う？

何か助けていただければ幸いです。

編集：ここでは

は私のレンダリング（）シーンのためのコードです：

function render() { 

      var timer = Date.now() * 0.00030; 

      camera.position.x += (0.5*Math.sin(timer) * mouseX - camera.position.x) * 0.05; 
      camera.position.y += (0.5*Math.cos(timer) *- mouseY - camera.position.y) * 0.05; 
      camera.position.z = 0; 

      camera.lookAt(scene.position); 

      for (i = 0; i < scene.children.length; i ++) { 
       var object = scene.children[ i ]; 
       if (object instanceof THREE.Points) { 
        object.rotation.y = time * (i < 4 ? i + 1 : - (i + 1)); 
       } 
      } 

      for (i = 0; i < materials.length; i ++) { 
       color = parameters[i][0]; 
       h = (0 * (color[0] + time) % 360)/360; 
       materials[i].color.setHSL(h, color[1], color[2]); 
      } 

      renderer.render(scene, camera); 

     } 

だけ明確にする、私は、マウスの左ボタンがクリックされるたびに異なる特定の位置にcamera.position.z = 0;をアニメーション化するために期待していました私のシーン。

Answer 1

ドキュメント上でマウスイベントをリッスンし、位置を切り替えてから、render()を呼び出してキャンバスを再描画することができます。

// list of positions in [x, y, z] coordinates 
 
var positions = [ 
 
    [0, 0, 0], 
 
    [5, 0, 0] 
 
]; 
 

 
// set our first position 
 
var positionIndex = 0; 
 
var position = positions[positionIndex]; 
 

 
document.addEventListener('click', function() { 
 
    // when a click happens ... 
 
    positionIndex++; 
 
    // reset position index back to 0 if it's past the end of the array 
 
    positionIndex = positionIndex >= positions.length ? 0 : positionIndex; 
 
    
 
    // update the current position 
 
    position = positions[positionIndex]; 
 
    
 
    // re-render the canvas 
 
    render(); 
 
}); 
 

 
function render() { 
 
    console.log('rendering at position', position); 
 
} 
 

 

 
// do our inital render 
 
render();