I’m seeing some strange results when using scene.pick with my port of CSS3DRenderer. This PG shows the problem. If you open the console, it prints the picked mesh (which is the first mesh under the pointer). The CSS3DObject furthest from the camera has id “esi1” and the one closest has id “esi2”. If you move the pointer over the other meshes in the scene it works as expected as well as if you move the pointer from any mesh except esi1 to any other mesh. However, in the region where esi1 and esi2 overlap if you move the pointer from esi1 into esi2, it will not pick esi2 as long as the esi1 remains under the pointer, even where esi2 occludes esi1. I thought maybe it was the render order, but if I comment out the rendering order (and remove the bg or move the camera so it isn’t in the way) I still see the same thing. I conclude that it must have something to do with the depth mask (the esi1 and esi2 meshes have materials that write to the depth buffer, but not the color buffer, so that the CSS transformed DOM elements can be seen underneath. Can anyone see why this happens and what I can do about it.
If you are interested in why I want to do this, read on.
The reason I am doing this is to determine when the pointer should be captured by the DOM content. I am currently relying on the scene picking to tell me when the pointer enters the dom content, and then a very complex pointer management system and continually polling the dom object under pointer to determine when a specific CSS3DObject should release the pointer. This works great until a pickable mesh is completely within the bounds of the CSS3DObject and then it doesn’t work because the canvas won’t receive pointer events until the pointer leaves the dom content. The solution is an even more complex pointer mask which is an invisible dom element that occupies the same screen space as the mesh that triggers pointer release. I thought if I could just use a ray cast, say 4 times a second, that would be alot easier.