CODEWITHSUNDEEP
javascripthtmlthree.js
Georg
Georg

Reputation: 413

Threejs object selection issue

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

Upvotes: 0

Views: 1086

Answers (2)

gevaraweb
gevaraweb

Reputation: 923

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);
}

Upvotes: 4

Jan Kok
Jan Kok

Reputation: 1

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.

Upvotes: 0

Related Questions