javascript - raycaster - three js texture

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

Question

Tengo un objeto 3D con la posición (x, y, z). ¿Cómo puedo calcular la posición de la pantalla (x, y) de ese objeto?

Lo he buscado y una solución es encontrar la matriz de proyección y luego multiplicar el punto de posición 3D por esta matriz para proyectarla en alguna superficie de visualización 2D (pantalla de la computadora). Pero no tengo idea de cómo encontrar esta matriz en Three.js.

Intento una función de conversión como esta, pero da un resultado incorrecto

function Point3DToScreen2D(point3D){
            var screenX = 0;
            var screenY = 0;
            var inputX = point3D.x - camera.position.x;
            var inputY = point3D.y - camera.position.y;
            var inputZ = point3D.z - camera.position.z;
            var aspectRatio = renderer.domElement.width / renderer.domElement.height;
            screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
            screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
            screenX = screenX * renderer.domElement.width;
            screenY = renderer.domElement.height * (1-screenY);
            return {x: screenX, y: screenY};
        }

Gracias de antemano.

Answer 1

Consulte la fuente en la demostración: http://stemkoski.github.com/Three.js/Mouse-Over.html

El objeto que creo que le interesa es THREE.Projector (); puede usar esto, por ejemplo, para automatizar cálculos que crean rayos desde la ubicación del cursor del mouse en la pantalla y proyectarlo en la escena.

Answer 2

Lo hago por este código por fin:

Nota: div parameter = canvas dom element.

function toScreenXY( position, camera, div ) {
            var pos = position.clone();
            projScreenMat = new THREE.Matrix4();
            projScreenMat.multiply( camera.projectionMatrix, camera.matrixWorldInverse );
            projScreenMat.multiplyVector3( pos );

            var offset = findOffset(div);

            return { x: ( pos.x + 1 ) * div.width / 2 + offset.left,
                 y: ( - pos.y + 1) * div.height / 2 + offset.top };

        }
function findOffset(element) { 
          var pos = new Object();
          pos.left = pos.top = 0;        
          if (element.offsetParent)  
          { 
            do  
            { 
              pos.left += element.offsetLeft; 
              pos.top += element.offsetTop; 
            } while (element = element.offsetParent); 
          } 
          return pos;
        } 

Answer 3

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