Line grid that only shows up on back faces?

Questions
,
1

I’m building a 3d scatterplot visualizer, and I always want there to be a grid behind the points, regardless of how the camera is rotated/oriented. I’ve used THREE.GridHelper to make 6 grids that are aligned to make a cube, but I’m not sure how to make the sides facing the camera not show.

To show an example, I’ve faded out 3 of the grids (the ones front-facing the camera in this shot) and outlined those faces in red:

Imgur

I want those to be hidden, and if the user rotates the camera, they would show if no longer facing the camera. This would also mean that if the user zoomed inside the plot, they would see a grid on all 6 sides if they rotated the camera view around.

I can achieve this effect easily if I create a (solid) plane geometry and just use THREE.BackSide on the material; for grid/lines, however, it seems to not be as simple. Would also be nice if I could achieve this with a single piece of geometry as opposed to 6 individual meshes/geometries.

Here’s a codepen with this grid in place:

grid test

Appreciate any help!

Adam

2

You can try to represent each side of the mesh as an instance of THREE.Plane. You can then compute the signed distance between the camera’s position and the plane (via Plane.distanceToPoint()). If the distance is positive, the camera is in front of the plane and vice versa. With this information it should be easy to control the visibility of your grids.

1 Like
3

Thanks a bunch, @Mugen87! Will try this when I get home from work tonight.

4

@Mugen87 Thanks again for the help! It was a breeze to get this working with your assistance!

It was as easy as adding 6 THREE.Plane() with different normals and constants, then creating a new vector based on the unprojected camera and using that to get the signed distance to each of the planes; this determined whether the corresponding grid should be visible or not.

I updated the codepen in case anyone wants to see the working example:

https://codepen.io/bitzilla/pen/XQzryM

2 Likes