javascript - Three.js Inaccurate Raycaster -


i trying detect clicks on plane mesh. set raycaster using examples guide.

here code: http://jsfiddle.net/bar24/o24eexo4/2/

when click below marker line, no click detected though click inside plane (marker line has no effect).

also try resizing screen. then, clicks above marker line may not work.

maybe has use of orthographic camera? or not updating required matrix?

function onmousedown(event) {   event.preventdefault();    mouse.x = (event.clientx / window.innerwidth) * 2 - 1;   mouse.y = -(event.clienty / window.innerheight) * 2 + 1;   //console.log("x: " + mouse.x + ", y: " + mouse.y);    raycaster.setfromcamera(mouse, camera)    var intersects = raycaster.intersectobjects(objects);    if (intersects.length > 0) {     console.log("touched:" + intersects[0]);   } else {     console.log("not touched");   } } 

your css affect raycasting calculations. 1 thing can set

body {     margin: 0px; } 

for more information, see three.js ray intersect fails adding div.

you have handle window resizing correctly. typical pattern looks this:

function onwindowresize() {      var aspect = window.innerwidth / window.innerheight;      camera.left   = - frustumsize * aspect / 2;     camera.right  =   frustumsize * aspect / 2;     camera.top    =   frustumsize / 2;     camera.bottom = - frustumsize / 2;      camera.updateprojectionmatrix();      renderer.setsize( window.innerwidth, window.innerheight );  } 

study three.js examples. in particular, see http://threejs.org/examples/webgl_interactive_cubes_ortho.html.

also, read this answer, describes how instantiate orthographic camera.

three.js r.80


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -