Schweben Sie ein DIV auf ThreeJS Object und halten Sie den Standort mit der 3D-Welt synchron

Question

So platzieren Sie ein DIV im 2D-Raum über ein 3D-Objekt in ThreeJs, damit das DIV bei der Drehung der Welt mitbewegt wird.

Hinweis: Das 3D-Objekt wird aus einem Modell geladen. Es gibt also Gruppen innerhalb von Gruppen und dann ein Netz.

Answer 1

sowie das Sprite, können Sie auch einen Bildschirm Übersetzung tun, wenn Sie es vorziehen, für welchen Gründen auch immer divs zu verwenden.

Wo obj einen object3d ist und Renderer, Kamera definiert sind und verfügbar sind, die X- und Y-Werte aus der Funktion kann an CSS übergeben werden:

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 
    }; 

};

Je nach Einstellung, wenn sich die Szene ändert und Objekte sich bewegen, müssen Sie die Div-Positionen aktualisieren. Sie können dies mit Kamera oder Steuerelementen tun. Da mein Textbaustein nur die Welt mit Steuereingaben ändert, benutze ich eine Change-Event-Funktion.

Es ist schwierig, hier ein Beispiel zu geben, weil es schwierig ist zu wissen, welche divs Sie verwalten. Aber ich verwalte zum Beispiel ein multidimensionales Array von 3D-Objekten und entsprechenden Beschriftungen in jQuery divs.

Das Array der Struktur: [[div, object3d], [div, object3d], [div, object3d], [div, object3d]]

und das Änderungsereignis auf die Kontrollen führt die folgenden :

 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 
         }); 
       } 
     } 

bearbeiten Arbeits Geige: https://jsfiddle.net/dpe5r41g/