Hi all,
I set up a RayCaster in my scene that contains multiple instances of BoxGeometry used to represent various properties. The RayCaster is supposed to point at the geometries, and their name shall be emitted to a little black box on the top left of the screen. I’m using an OrthographicCamera and MapControls. A live instance of the scene can be found here.
The problem is that the RayCaster doesn’t always work. If you pan the scene or tilt it, there are certain angles for which raycasting doesn’t work. Here is the code:
import { Raycaster, Vector2 } from 'three'
export default class MakeRaycaster {
/**
* @type Raycaster
*/
raycaster
/**
* @type Vector2
*/
pointer
/**
* @type ThreeMatrix
*/
ThreeMatrix
INTERSECTED
constructor (ThreeMatrix) {
this.ThreeMatrix = ThreeMatrix
this.pointer = new Vector2()
this.raycaster = new Raycaster(undefined, undefined, 0, undefined)
}
init () {
window.addEventListener('pointermove', this)
}
onAnimationFrame () {
}
/**
* Called by window.addEventListener('pointermove', this)
* @param event
*/
handleEvent ( event ) {
const viewport = this.ThreeMatrix.viewport
this.pointer.x = ((event.clientX / viewport.width) * 2) - 1
this.pointer.y = -(((event.clientY / viewport.height) * 2) - 1)
console.log(this.pointer)
this.raycaster.setFromCamera(this.pointer, this.ThreeMatrix.camera.instance)
const intersects = this.raycaster.intersectObjects(this.ThreeMatrix.data.nodeMeshes, false)
if (intersects.length > 0) {
if (this.INTERSECTED !== intersects[0].object) {
this.INTERSECTED = intersects[0].object
this.ThreeMatrix.data.infoBox.style.backgroundColor = 'black'
this.ThreeMatrix.data.infoBox.innerHTML = this.INTERSECTED.name
}
} else {
this.ThreeMatrix.data.infoBox.style.backgroundColor = null
this.ThreeMatrix.data.infoBox.innerHTML = ''
this.INTERSECTED = null
}
}
destroy () {
window.removeEventListener('pointermove', this)
this.raycaster = null
}
}
The RayCaster is initialized in the ThreeMatrix class by simply calling this method:
makeRaycaster () {
if (this.raycaster != null) {
return this
}
this.raycaster = new MakeRaycaster(this)
this.raycaster.init()
}
What is going wrong with it? I switched to OrbitControls to see if something will change but the problem was still there. Any help will be much appreciated!
FYI: I was not able to reproduce the problem. Tried different orientations, pans and scales, but all the times the raycaster picked the correct cuboid.
I see in the code you check only the closed found intersection. Is it possible that there is some object invisible to the user, but visible to the raycaster? Maybe in such cases this object is at index 0 and the cuboid is at index 1 (or 2, …)?
Hi, thanks for checking out. I’m attaching pictures of configurations that introduce the problem. The scene has to be close to the bottom. In the attached configurations the cubes close to the VR button are not detected.
I see in the code you check only the closed found intersection. Is it possible that there is some object invisible to the user, but visible to the raycaster? Maybe in such cases, this object is at index 0 and the cuboid is at index 1 (or 2, …)?
What do you mean by a close found intersection? Are there other ones? Do you mean that there may be a problem with the cubes?
Thanks for looking into this again 
I have the following hypothesis:
- You use orthographic camera with negative near plane, so you can see objects “behind” the camera
- When raycasting intersects the scene, it can only intersect forward objects, that’s why you cannot detect objects near the bottom of the screen (they are behind you).
Here is an illustration. The red buildings are visible and detectable. The two left gray buildings are only visible, but not detectable:
I mean that intersecting returns an array of all intersected objects, sorted from the closest intersection to the furthest. So, there might be intersects[1], intersects[2] and so on. However, I think that the most probable cause of your problem is the raycaster being too close to the scene.
Hi! Thanks for the quick reply. I think your hypothesis about objects being behind the Raycaster is correct. After you mentioned the problem (and thank you very much for the nice diagram) I tried to print the distance parameter of the intersected objects and I found that the objects that are not captured have a distance of zero or less:
if (intersects.length > 0) {
console.log(intersects[0].distance)
}
So how do I proceed? Is there a way to change the position of the Raycaster? Shall I pull the camera back? A combination?
Thank you very much again!
I have never done this, so most likely you can try:
- either move the camera further away – it may help to set the
near of the camera to 0, so you can visually see what the raycaster sees;
- or move the origin of raycaster backwards, right after
setFromCamera calculates the origin and the direction.
1 Like
After you mentioned this I saw that the camera’s near was set to -1000. After setting it to zero objects are now detected! However, when I zoom out the scene is clipped.
What does happen when you increase the camera’s far value?
It was 1000 and setting it to 10000 seems to be doing the trick. I don’t understand why though
No the problem is still there with the annoying clipping. I added a camera helper in case it helps
Where is the clipping? If it is at the far side, the far parameter is responsible. If it is the near side, the near parameter is responsible.
The triangular black cuts of the front buildings (see the snapshot) are caused by the near value. Maybe you should try to move the camera further away from the scene?
I pulled the camera back and I think the project is almost there if you like to check. Thanks again!
1 Like
I occur to a problem, when I use wheel zoom-out or zoom-in, meshes are clipped. could you share your code?
