HTML / CSS Interfering with raycaster... I guess

Questions
, , ,
1

I’m currently having issues using rayCaster, I almost sure that my issue is due CSS / HTML Elements interference.

Let me share some everything I consider relevant about my env and hopefully somebody with more experience will be able to help me.



My current DOM structure is:

<html>
  <head></head>
  <body>
    <div id="appContainer">
      <div id="canvasContainer">
      </div>
    </div>
  </body>
</html

I'm instantiating THREE by: 
const renderer = new THREE.WebGLRenderer({ antialias: true }), [])

Then I'm attaching the render to the DOM via *(please ignore flow-type annotations)*: 
const canvasContainer = ((document.getElementById('canvasContainer'): any) :HTMLElement)
canvasContainer.appendChild(renderer.domElement)

The CSS I got applied to the elements are: 
html, body, div, canvas {
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
}

Below you see a screenshot of the 'application':

1375×973

I got the function below hooked to the onClick event of the canvasContainer:

OnClick Function
(Note: I already have the rayCaster created outside the function)

const canvasContainer = ((document.getElementById('canvasContainer'): any) : HTMLElement)

console.log(`container offset left: ${canvasContainer.offsetLeft}`)
console.log('container offset right: ${canvasCOntainer.offsetRight}`)

const mouseX = (event.clientX / renderer.domElement.width) * 2 -1
const mouseY = - (event.clientY / renderer.domElement.height) * 2 + 1

console.log(`mouseX ${mouseX}`)
console.log(`mouseY ${mouseY}`)

rayCaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera)
const intersect = rayCaster.intersectObjects(scene.children)

console.log(intersects)

So this is basically my setup, now the results...

If I click right in the tile labeled '0,0' *(which actually is the coordinate 0,0)*.
*Note: I'm clicking right in the come (which is very near to 0,0)*

This is what I get on my console:

586×542



So as you can see even considering the fact that the canvas is inside an html element, the offset is still 0, so it should not influence it right?


Now, if I change the way I intersect objects from:

const intersects = rayCaster.intersectObjects( scene.children )

to:

const intersects = rayCaster.intersectObjects( scene.children, true )

Then this is what I get once I click:



This results basically includes the tile, the legend but surprisingly also a few lines from the Gimbal, even though I’m 100% sure I click in the comma between the 0,0 text geometry. Which kinda suggest me there’s something really weird going on in regards of some offset thing I’m not picking.

Now, using Chrome elements inspector I found that the canvasContainer div has 809x942 pixels, while the canvas has 809x938px, which also suggests something, the trouble is I’m not sure what to do moving forward.

What I tried to was to change canvas positioning to both static and fixed, but didn’t work either.

Can somebody point me in the right direction?


Thanks in advance.

2

Can you please try to compute your mouse coordinates like suggested here:

Does it make any difference?

Besides, keep in in that passing true to Raycaster.intersectObjects() means the given array is recursively tested for intersections. If the visual elements of your coordinate system is composed of a hierarchy of objects, you definitely want to pass true to this method. Otherwise you might detect no intersections at all.

1 Like
3

Hi Mugen,

Thanks for your reply, I changed the way I’m computing mouseCoordinates and even though it didn’t change the results, I think this approach looks solid, so regardless I’ll keep it.

Now, I’m curious about the true flag of intersectObjects() method.
As you can see on my 1st screenshot I have a tile, and this tile is basic composed by a plane geometry as well as a text geometry wrapped by a group, would it mean a hierarchy of objects?

If so… how can I get access to the whole group instead of an array with geometries?
Would it be via: intersects[0].object.parent?

Once again, thanks for your reply.

4

Yes.

I’m not sure this works for your case but in general you never know how deep intersects[0].object is located in the hierarchy. So you don’t get the intended object every time.

5

Oh thanks,

So looks like I’m not in the wrong direction.

What is the strategy then to look for what you want in the intersection? Is there a way to tag these groups with meaningful names or something like that?

6

One possible solution: You can save custom data in Object3D.userData and then evaluate this information after your intersection test.

7

Thanks again, that should do it.