ThreeJSオブジェクト上にDIVをホバリングして、3D世界との位置同期を保ちます

Question

ワールドが回転するとDIVも一緒に移動するように、DIVを3Dオブジェクト上の3Dオブジェクト上に配置する方法

注：3Dオブジェクトはモデルからロードされるため、グループ内にグループがあり、次にメッシュがあります。

Answer 1

だけでなく、スプライトあなたが何らかの理由でdivを使用することを好む場合、あなたはまた、画面の翻訳を行うことができます。 objがobject3d、レンダラで、カメラが定義され、利用可能な、関数からのxとyの値は、CSSに渡すことができるさ

：

function getScreenTranslation (obj) { 

    var vector = new THREE.Vector3(); 
    var widthHalf = 0.5 * renderer.context.canvas.width; 
    var heightHalf = 0.5 * renderer.context.canvas.height; 

    var bbox = new THREE.BoundingBoxHelper(obj, 0xFFFFFF); 

    bbox.update(); 

      bbox.updateMatrixWorld(); 
      bbox.updateMatrix(); 

    vector.setFromMatrixPosition(bbox.matrixWorld); 
    vector.project(camera); 
    vector.x = vector.x * widthHalf + widthHalf; 
    vector.y = -(vector.y * heightHalf) + heightHalf; 
    return { 
      x: vector.x, 
      y: vector.y 
    }; 

}。

あなたの設定によっては、シーンが変わってオブジェクトが動いたときに、divの位置を更新する必要があります。あなたはカメラやコントロールでこれを行うことができます。私の定型文はコントロールの入力だけで世界を変えるので、私はchangeイベント関数を使用します。

this.controls.addEventListener('change', my_change_event_function); 

あなたが管理している部門を知ることは難しいため、例を挙げるのは難しいです。しかし、例えば、私は、jquery divの3dオブジェクトと対応するラベルの多次元配列を管理しています。

アレイの構造を有する：コントロールの [DIV、object3d]、[DIV、object3d]、[DIV、object3d]、[DIV、object3d]

および変更イベントは、以下を実行します：フィドル作業

 if (labels !== undefined) { 
       for (var i = 0; i < labels.length; i++) { 
         var position = getScreenTranslation(labels[i][1]); 
         labels[i][0].css({ 
           left: position.x, 
           top: position.y 
         }); 
       } 
     } 

編集：https://jsfiddle.net/dpe5r41g/