javascript - examples - Conversión de Coordenadas mundiales a Coordenadas de pantalla en Three.js utilizando Proyección

three.js tutorial

Question

Hay varias preguntas de pila excelentes ( 1 , 2 ) sobre desproyectar en Three.js, que es cómo convertir (x, y) las coordenadas del mouse en el navegador a las coordenadas (x, y, z) en el espacio del lienzo Three.js. En general, siguen este patrón:

    var elem = renderer.domElement, 
        boundingRect = elem.getBoundingClientRect(),
        x = (event.clientX - boundingRect.left) * (elem.width / boundingRect.width),
        y = (event.clientY - boundingRect.top) * (elem.height / boundingRect.height);

    var vector = new THREE.Vector3( 
        ( x / WIDTH ) * 2 - 1, 
        - ( y / HEIGHT ) * 2 + 1, 
        0.5 
    );

    projector.unprojectVector( vector, camera );
    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
    var intersects = ray.intersectObjects( scene.children );

He intentado hacer lo contrario, en lugar de pasar del espacio "pantalla al mundo" para pasar del espacio "mundo a pantalla". Si conozco la posición del objeto en Three.js, ¿cómo determino su posición en la pantalla?

No parece haber ninguna solución publicada para este problema. Otra pregunta sobre esto acaba de aparecer en Stack , pero el autor afirma haber resuelto el problema con una función que no funciona para mí. Su solución no usa un Rayo proyectado, y estoy bastante seguro de que, dado que 2D a 3D usa unprojectVector (), que la solución 3D a 2D requerirá projectVector ().

También hay este problema abierto en Github.

Cualquier ayuda es apreciada.

Answer 1

No puede convertir las coordenadas (x, y) a (x, y, z) porque pierde información. Lo que ha citado es cómo encontrar todos los puntos en todos los objetos de la escena que se cruzan con el rayo generado por (x, y).

La proyección de "mundo a pantalla" a medida que se solicita es de lo que se trata la proyección, y es equivalente a representar un solo punto (x, y, z). Lo que haces es aplicar la matriz de proyección a tu punto (x, y, z). Se supone que es la función Projector.projectVector(vector, camera) en http://mrdoob.github.com/three.js/docs/49/#Projector , pero debido a que genera un vector 3d, solo puedo supongamos que una de las dimensiones es 0 y puede ignorarla.

Answer 2

Para Three.js (r75) moderno, un vector se puede proyectar en la pantalla con:

var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width / 2, heightHalf = height / 2;

var pos = object.position.clone();
pos.project(camera);
pos.x = ( pos.x * widthHalf ) + widthHalf;
pos.y = - ( pos.y * heightHalf ) + heightHalf;

Answer 3

Para todos los que están deprecated o los registros de warnings , la respuesta aceptada es para versiones anteriores de Three.js. Ahora es aún más fácil con:

let pos = new THREE.Vector3();
pos = pos.setFromMatrixPosition(object.matrixWorld);
pos.project(camera);

let widthHalf = canvasWidth / 2;
let heightHalf = canvasHeight / 2;

pos.x = (pos.x * widthHalf) + widthHalf;
pos.y = - (pos.y * heightHalf) + heightHalf;
pos.z = 0;

console.log(pos);

Answer 4

Prueba con esto:

var width = 640, height = 480;
var widthHalf = width / 2, heightHalf = height / 2;

var vector = new THREE.Vector3();
var projector = new THREE.Projector();
projector.projectVector( vector.setFromMatrixPosition( object.matrixWorld ), camera );

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