Trijs raycaster only works close

Question

I followed mrdoobs examples on how to use raycasting to handle interactive objects. I also looked at many of the many similar questions and tried countless things. Racist works ... If I'm at a distance of less than 1.

Raycaster is set to almost 0 and far infinity (default). I did not see code examples where the distance was set.

I hope for another pair of eyes.

// snippet glow.clickables = []; var cubeGeo = new THREE.CubeGeometry(2, 2, 2); cubeGeo.computeFaceNormals(); var cube = new THREE.Mesh(cubeGeo, redmat); cube.position.y = 10; cube.position.x = 0; cube.position.z = -12; cube.overdraw = true; glow.Vis.scene.add(cube); glow.clickables.push(cube); onclick_(); var onclick_ = function() { $('#world').on('mousedown', function(e){ var mouseX = (event.offsetX / $('#world').width()) * 2 - 1; var mouseY = - ( event.offsetY / $('#world').height()) * 2 + 1; var vector = new THREE.Vector3(mouseX, mouseY, 0.1); //what should z be set to? //console.info(vector); // A vector between -1,1 for both x and y. Z is whatever is set on the line above projector.unprojectVector(vector, glow.Vis.camera); var conts = glow.Vis.controls.getObject().position; // control 3dObject which the camera is added to. var clickRay = new THREE.Raycaster(conts, vector.sub(conts).normalize()); var intersects = clickRay.intersectObjects(glow.clickables); console.info(intersects.length); if(intersects.length > 0) { alert("Click detected!"); } }); } 

Answer 1

Adjusting the position of the mouse in this way is more accurate.

  var rect = renderer.domElement.getBoundingClientRect(); mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1; mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1; 

Answer 2

To detect a mouse (far or near! No matter what!) Do the following:

put this in your global:

 var pointerDetectRay, projector, mouse2D; 

put this in your init () function:

 pointerDetectRay = new THREE.Raycaster(); pointerDetectRay.ray.direction.set(0, -1, 0); projector = new THREE.Projector(); mouse2D = new THREE.Vector3(0, 0, 0); 

put this in your render () loop function:

 pointerDetectRay = projector.pickingRay(mouse2D.clone(), camera); 

and this is a mouse event:

 function onDocumentMouseMove(event) { event.preventDefault(); mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1; mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1; } 

Now, where you want to detect objects under the mouse pointer, use this:

 var intersects = pointerDetectRay.intersectObjects(scene.children); if (intersects.length > 0) { var intersect = intersects[0]; // intersect is the object under your mouse! // do what ever you want! } 

Answer 3

I use the following, which works for me over long distances:

  var projector = new THREE.Projector(); function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); projector.unprojectVector(vector,camera); var raycaster = new THREE.Raycaster(camera.position,vector.sub(camera.position).normalize() ); var intersects = raycaster.intersectObjects( [sphere,cylinder,cube] ); if ( intersects.length > 0 ) { intersects[ 0 ].object.material.transparent=true; intersects[ 0 ].object.material.opacity=0.1; console.log(intersects[0]); } } 

It just sets the first selected object to translucent. Full example: https://github.com/josdirksen/learning-threejs/blob/master/chapter-09/02-selecting-objects.html