Three.js: Obtenir des coordonnées 3D à partir d'un point 2D

Créé le 1 juil. 2011 · 6Commentaires · Source: mrdoob/three.js

salut les gars

Je voudrais savoir comment puis-je obtenir les coordonnées 3D à partir d'un point de collision souris 2D
à partir de ce code

function onDocumentMouseDown( event ) {
   event.preventDefault();
   mouse2d.x = ( event.clientX / window.innerWidth ) * 2 - 1;
   mouse2d.y = - ( event.clientY  / window.innerHeight ) * 2 + 1;
   mouse2d.z = 1;

   var r = new THREE.Ray();
   r.origin.copy( mouse2d );
   var matrix = camera.matrixWorld.clone();
   matrix.multiplySelf( THREE.Matrix4.makeInvert( camera.projectionMatrix ) );
   matrix.multiplyVector3( r.origin );
   r.direction = r.origin.clone().subSelf( camera.position );
   var c = THREE.Collisions.rayCastNearest( r );
   if( c ) {
//////////////////HERE GET THE 3D POINT COORDINATES////////////////////////
      c.mesh.materials[ 0 ].color.setHex( 0xaa0000 );
   } else {
      plane.materials[0].color.setHex( 0xF9EFD7 );
   }
};

L'objet de collision est un plan que j'utilise comme sol et je veux connaître les coordonnées 3D du point de collision afin de définir la position d'un objet.
Merci d'avance

Question

Source

bagg

Tous les 6 commentaires

Peu importe, je l'ai trouvé

bagg le 1 juil. 2011

👎5

Comment avez-vous fini par le faire?

mrdoob le 1 juil. 2011

J'ai moi-même ce problème. Je n'ai même pas été touché par le collisionneur. Comment l'avez-vous résolu?

inear le 3 août 2011

@inear : avez-vous essayé avec la classe Ray ?

mrdoob le 3 août 2011

Merci! Cela fonctionne comme un charme. La propriété point est exactement ce dont j'avais besoin.

var vector = mouse2D;
projector.unprojectVector( vector, camera );
var r = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var c = r.intersectObject(wave)
if( c.length > 0 ) {
   sphere.position = c[0].point;
}

inear le 3 août 2011

var getZvalue = function (e)
{
    var rect = e.target.getBoundingClientRect();
    // 2D
    var mouseX = e.clientX - rect.left;
    var mouseY = e.clientY - rect.top;

    // 3D
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT= window.innerHeight;
    var mouse = new THREE.Vector2();
    mouse.x = (mouseX/SCREEN_WIDTH) *2 - 1;
    mouse.y = -(mouseY/SCREEN_HEIGHT) *2 + 1;

    // Raycaster
    if (TerraDroneViewer.raycaster == null)
    {
        TerraDroneViewer.raycaster = new THREE.Raycaster();
    }

    TerraDroneViewer.raycaster.setFromCamera( mouse, TerraDroneViewer.camera );

    var intersects = TerraDroneViewer.raycaster.intersectObjects( TerraDroneViewer.maps.children );
    console.log("raycast=" + intersects.length);

    if (intersects.length != 0)
    {
        var x = mouse.x * 10;
        var y = mouse.y * 10;
        console.log("x = " + intersects[0].point.x + " y = " + intersects[0].point.y);
        var z = parseFloat(intersects[0].point.z) * 10;

        return {
                     x: x,
                     y: y,
                     z: z
                }
    }

        return null;
};