懸停ThreeJS對象上的DIV，保持其與3D世界的位置同步

Question

如何在三維空間中的3D對象上放置2D空間中的DIV，以便當世界旋轉時，DIV也隨之移動。

注意：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位置。你可以用相機或控制器來做到這一點。由於我的樣板只是通過控件輸入來改變世界，所以我使用更改事件功能。

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

這是很難做出了榜樣這裏，因爲它是很難知道你正在管理什麼資料覈實。但是，例如，我管理一個多維數組的3d對象和jquery divs中的相應標籤。

陣列具有如下結構： [[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/