Mouse pointer position on event not centered on arrow tip on THREE.js

Question

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 · Accepted Answer · 2017-05-23 11:54:04Z

2

You need a little CSS:

body { margin: 0 }

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

Also see this related answer.

three.js r.65

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Feb 12, 2014 at 21:22

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Mouse pointer position on event not centered on arrow tip on THREE.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related