three.jsを使用すると、パンされたオブジェクトをその中心を中心に回転させることができます。jsfiddle、 http: //jsfiddle.net/yKt6h/4/を作成しました
コントロールパネルで自動回転モードをチェックすると、パンされた立方体をその中心を中心に回転させることができます。マウスを動かして立方体を回転させようとすると、同様の効果が得られますか?
可能であれば、サンプルコードを教えてください
three.jsを使用すると、パンされたオブジェクトをその中心を中心に回転させることができます。jsfiddle、 http: //jsfiddle.net/yKt6h/4/を作成しました
コントロールパネルで自動回転モードをチェックすると、パンされた立方体をその中心を中心に回転させることができます。マウスを動かして立方体を回転させようとすると、同様の効果が得られますか?
可能であれば、サンプルコードを教えてください
jsFiddleを表示すると、コンソールでエラーが発生します。THREE is not defined
ただし、要求していることは難しくありません。トラックボールカメラは、あなたが望むことを正確に実行するように設計されています。オブジェクトを原点でレンダリングする場合は、トラックボールコントロールを初期化する必要があります。TrackballControlsを使用した簡単な月のデモを作成しました。TrackballControls.jsで変更を行う必要はありません。
上記のデモでは、トラックボールコントロールを初期化する関数を呼び出します。この関数は、ThreeUtil.jsファイルで次のように定義されています。
function initTrackball(camera, rotate, zoom, pan, damping) {
var controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = rotate || 1.0;
controls.zoomSpeed = zoom || 1.2;
controls.panSpeed = pan || 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = damping || 0.3;
return controls;
}
ユーザーがパンやズームを使用できないようにし、オブジェクトを中心に回転できるようにする場合は、上記の関数を設定controls.noZoom = true
してください。controls.noPan = true
月のオブジェクトがシーンの原点にあるので、カメラを原点から少し離して設定するだけです。正のz軸上に配置するので、すでに原点でオブジェクトを見ています。次に、上記の関数を呼び出してコントロールを設定します。カスタム回転速度を渡します:
controls = initTrackball(camera, 0.8);
次に、各フレームで、animループでupdate関数を呼び出すだけです。
controls.update(camera);