2

I'm trying to determine the position of click events on the screen when using THREE.js with an Orthographic camera.

However, the position (as determined in a similar way as done here) is not accurate. It is on the mouse pointer area but not exactly on the tip.

By looking at online examples, I can see that for perspective cameras this works correctly.

Is this behaviour correct or is there a problem with my code? Is there a way to align the determined position with the arrow tip?

function onDocumentMouseDown(event) {
    event.preventDefault();
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
    projector = new THREE.Projector();
    var ray = projector.pickingRay(vector, camera);
    pointer.position = vector.clone();
    pointer.position.z = 0;

    renderer.render(scene, camera);
}

You can see a working example here

Community
  • 1
  • 1
Ezequiel
  • 668
  • 2
  • 9
  • 25

1 Answers1

2

You need a little CSS:

body { margin: 0 }

fiddle: http://jsfiddle.net/y6yS4/4/

Also see this related answer.

three.js r.65

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276