3d - superposicion - superposición de pantalla samsung j7

Conversión de la posición 3D a la posición de la pantalla 2D

Question

Necesito el código Three.js para convertir las coordenadas de un objeto 3D a 2d en un elemento ''div'' para poder colocar las etiquetas de texto donde deben estar (sin que esas etiquetas escalen / se muevan / giren junto con el movimiento 3D). Desafortunadamente, todos los ejemplos que he visto e intentado hasta ahora parecen estar usando funciones / técnicas obsoletas. En mi caso, creo que estoy usando r69 de Three.js.

Aquí hay un ejemplo de una técnica ''más antigua'' que solo produce errores para mí:

Three.js: convertir la posición 3d a la posición de pantalla 2d

Aquí hay un fragmento de un código más nuevo (?) Que no proporciona el contexto suficiente para que pueda trabajar, pero se ve mucho más limpio:

https://github.com/mrdoob/three.js/issues/5533

Answer 1

He escrito para mi proyecto la siguiente función; recibe una instancia de THREE.Object3D y una cámara como parámetros y devuelve la posición en la pantalla.

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

    var widthHalf = 0.5*renderer.context.canvas.width;
    var heightHalf = 0.5*renderer.context.canvas.height;

    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);

    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;

    return { 
        x: vector.x,
        y: vector.y
    };

};

Luego creé un THREE.Object3D solo para mantener la posición div (está unida a una malla en la escena) y, cuando sea necesario, se puede convertir fácilmente a la posición de pantalla usando la función toScreenPosition y actualiza las coordenadas del elemento div.

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + ''px'';
divElem.style.top = proj.y + ''px'';

Aquí un violín con una demostración .

Answer 2

Para mí, esta función funciona (Three.js versión 69):

function createVector(x, y, z, camera, width, height) {
        var p = new THREE.Vector3(x, y, z);
        var vector = p.project(camera);

        vector.x = (vector.x + 1) / 2 * width;
        vector.y = -(vector.y - 1) / 2 * height;

        return vector;
    }

Answer 3

Puede convertir una posición 3D en coordenadas de pantalla utilizando un patrón como este:

var vector = new THREE.Vector3();
var canvas = renderer.domElement;

vector.set( 1, 2, 3 );

// map to normalized device coordinate (NDC) space
vector.project( camera );

// map to 2D screen space
vector.x = Math.round( (   vector.x + 1 ) * canvas.width  / 2 );
vector.y = Math.round( ( - vector.y + 1 ) * canvas.height / 2 );
vector.z = 0;

three.js r.69