Three.js: 2d рдмрд┐рдВрджреБ рд╕реЗ 3 рдбреА рдирд┐рд░реНрджреЗрд╢рд╛рдВрдХ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 1 рдЬреБрд▓ре░ 2011  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: mrdoob/three.js

рд╣рд╛рдп рджреЛрд╕реНрддреЛрдВ

рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдореИрдВ рдХреИрд╕реЗ рдЯрдХрд░рд╛рд╡ рдмрд┐рдВрджреБ рдорд╛рдЙрд╕ 2d рд╕реЗ 3 рдбреА рдирд┐рд░реНрджреЗрд╢рд╛рдВрдХ рдкреНрд░рд╛рдкреНрдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ
рдЗрд╕ рдХреЛрдб рд╕реЗ

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

рдЯрдХрд░рд╛рд╡ рдХреА рд╡рд╕реНрддреБ рдПрдХ рд╡рд┐рдорд╛рди рд╣реИ рдЬрд┐рд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдореИрдВ рдЬрдореАрди рдХреЗ рд░реВрдк рдореЗрдВ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдореИрдВ рд╡рд╕реНрддреБ рдХреА рд╕реНрдерд┐рддрд┐ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЯрдХреНрдХрд░ рдмрд┐рдВрджреБ 3 рдбреА рдХреЛрд░реНрдбреНрд╕ рдХреЛ рдЬрд╛рдирдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред
рдЕрдЧреНрд░рд┐рдо рдореЗрдВ рдзрдиреНрдпрд╡рд╛рдж

рд╕рднреА 6 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдХрднреА рдорди рдирд╣реАрдВ рдорд┐рд▓рд╛

рдЖрдкрдиреЗ рдЗрд╕реЗ рдХреИрд╕реЗ рдкреВрд░рд╛ рдХрд┐рдпрд╛?

рдореБрдЭреЗ рдЦреБрдж рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд░рд╣реА рд╣реИред рдореИрдВ рдХреЛрд▓рд╛рдЗрдбрд░ рд╕реЗ рд╣рд┐рдЯ рднреА рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдЖрдкрдиреЗ рдЗрд╕реЗ рдХреИрд╕реЗ рдареАрдХ рдХрд┐рдпрд╛?

@inear : рдХреНрдпрд╛ рдЖрдкрдиреЗ Ray рд╡рд░реНрдЧ рдХреЗ рд╕рд╛рде рдкреНрд░рдпрд╛рд╕ рдХрд┐рдпрд╛?

рдзрдиреНрдпрд╡рд╛рдж! рдЬреЛ рдЖрдХрд░реНрд╖рдг рдХреА рддрд░рд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдмрд┐рдВрджреБ-рд╕рдВрдкрддреНрддрд┐ рд╕рд┐рд░реНрдл рд╡рд╣реА рд╣реИ рдЬрд┐рд╕рдХреА рдореБрдЭреЗ рдЬрд░реВрд░рдд рдереАред

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;
}
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;
};
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

makc picture makc  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

filharvey picture filharvey  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

fuzihaofzh picture fuzihaofzh  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

danieljack picture danieljack  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

seep picture seep  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ