0

I know this question has been asked many times and answered, but I'm currently having no luck with any of the answers I've followed (mainly this one Mouse / Canvas X, Y to Three.js World X, Y, Z).

I've gotten object selection done and working the code I am using is as follows

onMouseMove:function(event)
{
    event.preventDefault();

    var scope       =   Game.GSThree,
        $container  =   $(scope.container.element),
        width       =   $container.width(),
        height      =   $container.height(),
        vector,
        ray,
        intersects;

    scope.mouse.x   =   (event.clientX - scope.container.padding.left) / width * 2 - 1;
    scope.mouse.y   =   - (event.clientY / height) * 2 + 1;
    scope.mouse.z   =   0.5;
    vector          =   new THREE.Vector3(scope.mouse.x , scope.mouse.y , scope.mouse.z);
    ray             =   scope.projector.pickingRay(vector.clone() , scope.camera);
    intersects      =   ray.intersectObjects(scope.tiles.children);

    if(intersects.length)
    {
        var hovered = intersects[0].object;
        scope.selectObject(hovered);
    }
}

This works fine, but actually I need to also know the exact world coordinates of my current mouse position. I am not sure if the solutions I've tried hold true for the orthographic camera, which is what I am using. If I log either scope.mouse.x or vector.x these do not give the world coordinates, ray finds the objects perfectly fine, but I don't know how to get the current coordinates of the ray in the world.

Community
  • 1
  • 1
Rohan Deshpande
  • 694
  • 8
  • 22

1 Answers1

2

I think what you are looking for is:

intersects[0].point;

Benedikt
  • 767
  • 6
  • 13
  • Interesting...this works but it seems to be off by...`32px`? That is relevant because I have built an isometric tile based world and my tiles are `64x64` pixels currently. Perhaps this has something to do with whether placing a mesh at `x:0,z:0` places its top left corner at those coordinates...or the center of the mesh at those coordinates? I'm not too sure about that yet. Thanks very much though, I think this is correct so I'll accept this answer. – Rohan Deshpande Sep 23 '14 at 05:52
  • 1
    You maybe have a offset problem. You allready substract padding from your mouse position. You should also/instead(?) substract scope.container.offsetLeft . Or if you use JQuery it is better to use $(container).offset().left . It is also better to use pageX and not clientX. – Benedikt Sep 24 '14 at 07:38
  • btw: you don't substract offsetTop or padding.top from your y coordinate. – Benedikt Sep 24 '14 at 07:40
  • Oh really? All the examples I saw used clientX so that's why I used it. I'll change and see what happens. jQuery seemed to have some issue with getting the correct offset, maybe because of border box? I establish what the padding is on the container before the initial render so I know what it is. – Rohan Deshpande Sep 26 '14 at 08:44