Three.js: conversione della posizione 3d in posizione 2d dello schermo

Ho un object 3D con la posizione (x, y, z). Come posso calcolare la posizione dello schermo (x, y) di quell’object?

L’ho cercato e una soluzione è che devo trovare la matrice di proiezione e quindi moltiplicare il punto di posizione 3D con questa matrice per proiettarla su una superficie di visualizzazione 2D (schermo del computer). Ma non ho idea di come trovare questa matrice in Three.js.

Provo una funzione di conversione come questa, ma fornisce risultati errati

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

Grazie in anticipo.

Per me questa funzione funziona (Three.js versione 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; } 

Finalmente lo faccio con questo codice:

Nota: parametro div = elemento canvas canvas.

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

Guarda la fonte alla demo: http://stemkoski.github.com/Three.js/Mouse-Over.html

L’object a cui credo sia interessato è THREE.Projector (); è ansible utilizzarlo, ad esempio, per automatizzare i calcoli che creano raggi dalla posizione del cursore del mouse sullo schermo e proiettarlo nella scena.