CSS3DObjectの向きを変える

Question

私は回転させたいと思っているCSSの束を3Dシーンに持っています。

私のCSSオブジェクトは、それらが高いより多くの幅が広く、単純な長方形です：デフォルトパー

var element = document.createElement('div'); 
element.innerHTML = "test"; 
element.style.width = "75px"; 
element.style.height = "10px"; 

var object = new THREE.CSS3DObject(element); 

object.position.x = x; 
object.position.y = y; 
object.position.z = z; 

彼らは、z軸を「直面」しているかのように、作成したオブジェクトが定義されています。つまり、lookAt()関数を使用すると、オブジェクトは "テスト"テキストがポイントに向くように回転します。

私の問題は、divの「右端」が目的の点に向かっているように、私はむしろ回転させることです。私はアップベクトルに手を加えようとしましたが、まだアップベクトルにポイントを付けることが必要なので、動作しないように感じます。私はまた、最初にy軸に沿ってオブジェクトMath.PI/2を回転させようとしましたが、lookAt()は事前に設定された回転を無視しているようです。

代わりにオブジェクトのローカルzベクトルを再定義して、グローバルxベクトルと一緒に実行する必要があるようです。そのようにして、「見ている」方向のオブジェクトはシーン内の右にあり、次にlookAt()は適切に向きを設定します。

恐らく恐らく用語をマングリングするために申し訳ありません、初心者3Dプログラマはここにあります。

Answer 1

Object.lookAt(point)は、オブジェクトの内側の正のz軸が目的のポイントの方向を指すようにオブジェクトの向きを設定します。この作品

object.lookAt(point); 
object.rotateY(- Math.PI/2); 

three.js r.84