javascript - Threejs object selection issue -

javascript - Threejs object selection issue -

im working on little web-application using threejs. ran next issue:

i build prototype contains threejs content , works here (the canvas in prototype window.innerwidth , window.innerheight => has same size browser window. selecting works want utilize canvas on web page application , picking of 3d surfaces needs work there.

i discovered alter margin or top via css of canvas doesn't work anymore. web-application based on scroll page , threejs canvas within div container can seen scrolling through page.

for picking utilize next logic/code -> 1 works in "fullscreen prototype" not in web application page

self.renderer.domelement.addeventlistener( 'click', function(event){ event.preventdefault(); //convert mouse position right vector var vector = new three.vector3( ( event.clientx / window.innerwidth ) * 2 - 1, - ( event.clienty / window.innerheight ) * 2 + 1, 0.5 ); //translates 2d point normalized device coordinates raycaster can used picking self.projector.unprojectvector( vector, self.camera ); //raycaster needed observe interaction cube surface var raycaster = new three.raycaster( self.camera.position, vector.sub( self.camera.position ).normalize() ); var intersects = raycaster.intersectobjects( self.scene.children ); //change color based on intersection element if ( intersects.length > 0 ) { //selected object } }, false );

i think calculation wrong var vector can't figure out how correctly.

any help appreciated give thanks best reards

200% way

var x = event.offsetx == undefined ? event.layerx : event.offsetx; var y = event.offsety == undefined ? event.layery : event.offsety; var vector = new three.vector3(); vector.set( ( x / renderer.domelement.width ) * 2 - 1, - ( y / renderer.domelement.height ) * 2 + 1, 0.5 ); projector.unprojectvector( vector, photographic camera );

or see example. @ messages in console.

<script src="js/controls/eventscontrols.js"></script> eventscontrols = new eventscontrols( camera, renderer.domelement ); eventscontrols.draggable = false; eventscontrols.onclick = function() { console.log( this.focused.name ); } var mesh = new three.mesh( geometry, material ); scene.add( mesh ); eventscontrols.attach( mesh ); // function render() { eventscontrols.update(); controls.update(); renderer.render(scene, camera); }

javascript html5 three.js