2013-08-27 45 views
14

WebGlRendererを使用してThree.jsでOBJ要素を表示していますが、ユーザーが任意の方向にオブジェクトを回ってカメラを回転できるようにしたいのですが、 :Three.jsでオブジェクトの周りを回転する

Rotate camera in Three.js with mouse

しかし、どちらの例は私にエラーを返し、最初はプロジェクターが定義されていないことを言って、私はそれが「プロジェクター」との意味がわかりません。私は単純なカメラ、オブジェクトといくつかの光を持っています。 2番目のコードは、undefinedは関数ではないことを示しています。

誰かが必要な結果を得る方法を知っていますか?

答えて

29

これは何をしたいです:http://threejs.org/examples/misc_controls_orbit.html

は(あなたがそれらをダウンロードした後)の軌道制御を含める:

<script src="js/controls/OrbitControls.js"></script> 

セットアップ変数:

var controls; 

はにコントロールをアタッチカメラとリスナーを追加:

controls = new THREE.OrbitControls(camera); 
controls.addEventListener('change', render); 

とあなたのアニメーション機能のコントロールを更新:

controls.update(); 

を[更新] controls.autoRotate = true;(V73でテスト。

+0

ありがとうございます。今はカメラを回るアイテムです...どうすればその動作を逆転できますか?ありがとう –

+1

@FezVrastaどのような軌道を選択することができますので、カメラの代わりにオブジェクトを置くことができます。たとえば、 "球体"のようにしたい場合は、次のようにします。new THREE.OrbitControls(sphere); –

+0

ありがとうございますが、私はそれを動作させることができません、私はOBJをロードするためにこのコードを使用します:http://jsfiddle.net/7aqmB/しかし、私は_object_ ** OrbitControls **でそれはオブジェクトが未定義であると言う... –

1

確かに、あなたが選択したオブジェクトで 'camera'を置き換えた場合、オブジェクトは回転します。しかし、それを取り囲む他のオブジェクト(例えば、床のグリッド)がある場合、それらはまだ静止しています。それはあなたが望むものかもしれないし、奇妙に見えるかもしれない。オービットを初期化した後、私は自分のコードからOrbitControls.JSから中央のオブジェクトを上書きすることを選択した

を(?椅子が...床の上に浮い回転想像すること)

controls = new THREE.OrbitControls(camera, renderer.domElement); 
… 
controls.center = new THREE.Vector3(
    chair.position.x, 
    chair.position.y, 
    chair.position.z 
); 

(免責事項を制御します:私は持っています印象的なのはOrbitControls.jsのさまざまなバージョンがありますが、私はそれらすべてがこの中心オブジェクトを使用していると仮定します)

関連する問題