0

Im currently working on an small web-application which is using threejs. I ran into the following issue:

I build a prototype which contains my threejs content and everything works well here (The canvas is in the prototype window.innerWidth and window.innerHeight => so has the same size as my Browser window. Selecting works well but I want to use the canvas on my web page application and picking of 3d surfaces needs to work as well there.

I discovered as soon as I change the margin or top via CSS of the canvas it doesn't work anymore. The web-application is based on a scroll page and the threejs canvas is inside a div container which can only be seen by scrolling through the page.

For picking I use the following logic/code -> this one works well in the "fullscreen prototype" but not in the web application page

self.renderer.domElement.addEventListener( 'click', function(event){

    event.preventDefault();
    //CONVERT MOUSE POSITION TO CORRECT VECTOR
    var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
    //TRANSLATES A 2D POINT FROM Normalized Device Coordinates TO RAYCASTER THAT CAN BE USED FOR PICKING
    self.projector.unprojectVector( vector, self.camera );
    //RAYCASTER IS NEEDED TO DETECT INTERACTION WITH 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 WITH ELEMENT
    if ( intersects.length > 0 ) {
        //SELECTED OBJECT
    }
}, false );

I think that the calculation is wrong for the var vector but I just can't figure it out how to do it correctly.

Any help would be appreciated Thank you best reards

WestLangley
  • 102,557
  • 10
  • 276
  • 276
Georg
  • 423
  • 3
  • 8

2 Answers2

4

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, camera );

Or see this example. Look at messages in the 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);
}
gevaraweb
  • 912
  • 7
  • 19
  • Hey thank you for your feedback I tried it but still it didnt work :( – Georg Oct 21 '14 at 22:03
  • I found some page which contains also more content so the canvas is accessible by scrolling as well... The difference in his case is that he is using an iFrame... I want to do the same thing but without the iframe... Thank you for the great help – Georg Oct 21 '14 at 22:18
0

If you want to use it in your webpage, you probably need to calculate the vector with the width and height from your canvas element instead of the window which is your whole browser window.

Jan Kok
  • 1