javascript - Three.js Raycaster is offset when scollt the page -
if scene not show on page , can sroll , raycaster stops working , offset have scrolled .
srollt side 20 pixels down , have 20 pixels below object click , object raycaster recognizes correctly .
how fix problem?
would grateful help
use
var rect = renderer.domelement.getboundingclientrect(); mouse.x = ( ( event.clientx - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1; mouse.y = - ( ( event.clienty - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; will works you. here demo, scroll bottom click cube.
<!doctype html> <html> <head> <script src="http://threejs.org/build/three.min.js"></script> <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <style> body { font-family: monospace; background-color: #fff; margin: 0px; } #canvas { background-color: #000; width: 200px; height: 200px; border: 1px solid black; margin: 10px; padding: 0px; top: 10px; left: 100px; } .border { padding:10px; margin:10px; height:3000px; overflow:scroll; } </style> </head> <body> <div class="border"> <div style="min-height:1000px;"></div> <div class="border"> <div id="canvas"></div> </div> </div> <script> // three.js ray.intersects offset canvas var container, camera, scene, renderer, mesh, objects = [], count = 0, canvas_width = 200, canvas_height = 200; // info info = document.createelement( 'div' ); info.style.position = 'absolute'; info.style.top = '30px'; info.style.width = '100%'; info.style.textalign = 'center'; info.style.color = '#f00'; info.style.backgroundcolor = 'transparent'; info.style.zindex = '1'; info.style.fontfamily = 'monospace'; info.innerhtml = 'intersect count: ' + count; info.style.userselect = "none"; info.style.webkituserselect = "none"; info.style.mozuserselect = "none"; document.body.appendchild( info ); container = document.getelementbyid( 'canvas' ); renderer = new three.webglrenderer(); renderer.setsize( canvas_width, canvas_height ); container.appendchild( renderer.domelement ); scene = new three.scene(); camera = new three.perspectivecamera( 45, canvas_width / canvas_height, 1, 1000 ); camera.position.y = 250; camera.position.z = 500; camera.lookat( scene.position ); scene.add( camera ); scene.add( new three.ambientlight( 0x222222 ) ); var light = new three.pointlight( 0xffffff, 1 ); camera.add( light ); mesh = new three.mesh( new three.boxgeometry( 200, 200, 200, 1, 1, 1 ), new three.meshphongmaterial( { color : 0x0080ff } ) ); scene.add( mesh ); objects.push( mesh ); // find intersections var raycaster = new three.raycaster(); var mouse = new three.vector2(); // mouse listener document.addeventlistener( 'mousedown', function( event ) { var rect = renderer.domelement.getboundingclientrect(); mouse.x = ( ( event.clientx - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1; mouse.y = - ( ( event.clienty - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; raycaster.setfromcamera( mouse, camera ); intersects = raycaster.intersectobjects( objects ); if ( intersects.length > 0 ) { info.innerhtml = 'intersect count: ' + ++count; } }, false ); function render() { mesh.rotation.y += 0.01; renderer.render( scene, camera ); } (function animate() { requestanimationframe( animate ); render(); })(); </script> </body> </html>
Comments
Post a Comment