Threej OrbitControlsとTween

Question

私は、インターネット上でtrijをorbitControlsに追加する方法を探しています。

実際の目標：

1. は、マウスの動きに基づいて、オブジェクトの周りにカメラを回転させます。
2. トゥイーン緩和スムーズなカメラの動き

私はちょうどアニメーションループでカメラの位置を移動することで第2位を達成することができますが、私は、オブジェクト間の周りにカメラを移動するために、数学に精通していませんよそれを中心点（旋回）に戻します。これは＃1ではなく＃2を解決しました。

もう1人のorbitControlsは＃1を達成しましたが、コントロールと対話して更新時にトゥイーンを追加する方法がわかりません。

ありがとうございます！ マイケル

Answer 1

正弦と余弦を使用するだけで、ポイントの周りの任意のオブジェクトを回転させることができます。 targetPosition（またはターゲットオブジェクト）を選択し、実行時にcamera.positionメソッドとメソッドを更新します。私がyの代わりにzを追加した理由は、あなたがそれを垂直でなく深く回転させたいと思っているからです。 Math.cosとMath.sinの中には時間参照があり、その周りを回って回転の速度を変えることができます。

var targetPosition = new THREE.Vector2(100, 100); 
var radius = 50; 

function update() { 
    requestAnimationFrame(update); 
    camera.position.x = targetPosition.x + Math.cos(Date.now()/1000) * radius; 
    camera.position.z = targetPosition.y + Math.sin(Date.now()/1000) * radius; 
    camera.lookAt(targetPosition); 
} 

あなただけのユーザーが、（例えば）ボタンをクリックしたときに、位置Aから位置Bにトゥイーンを行うためにwan't場合は、目的の位置までの目標THREE.Vector3だけトゥイーンそのベクトルを作成する必要があり、そしてupdate()にちょうど加えて

var cameraPosition = new THREE.Vector3(); 

window.addEventListener('click', handleClick, false); 

function handleClick(e) { 
    TweenMax.to(cameraPosition, 1, { x: 100, y: 100, z: 100 }); 
} 

function update() { 
    requestAnimationFrame(update); 
    camera.position.copy(cameraPosition); 
}