How to render an object crossing another object


I have two objects in my scene, one blue, one white. (see the picture below)
The blue object is moving while the white one is static. When the blue object crosses the white one, as shown in the picture, we can’t see the blue part behind the white one.
I’d like to hide the white object but still see where the blue object crosses the white one. Is anyone as an idea to do so?

As I said, the blue object is moving in all direction, and I like my camera always pointing in the same direction toward the blue object. Is it possible to link a camera to an object?

A bit of an exaggeration :smiling_face_with_tear:

What you look for is probably not very hard - but it’s hard to tell from the description / tiny image, what you exactly look for :smiling_face_with_tear: Are you trying to replicate a specific effect that can be found somewhere online / YT / bigger picture?

Try with the following properties: transparent, opacity and depthTest. Here is one attempt based on what I understand from your description.

As for the camera looking at the blue object, use the camera’s method lookAt.

Hi, thanks for the attempt to answer my inpenetrable question.

  1. the method lookAt is not enougth for what I want to do. In your animation, I’d like the camera move with the blue objet (i.e going up and down so that the blue object seems static

  2. Playing with the following properties: transparent, opacity and depthTest, doesn’t seem to do what I’d like too. In your animation, I’d like to change the color of the blue object, red for instance when the object is inside the white object…
    Is anyone as an idea how to do this?
    Thanks again

I see.

If you want to move the camera up/down together with the blue object … why don’t you do exactly this? In the attached video, the blue object moves up-down and the camera moves together with it. The code is something like this (for motion of all directions you have to adjust the other coordinates of the camera):

blue.position.y = Math.sin( t/1000 );
camera.position.y = blue.position.y;

The intersection between the white and the blue objects can be any other color. If ‘red’ was mentioned in the first post, I would have used red color for the demo. Because you ask for the idea, here is my idea → three are objects: white plate (normal), blue ellipsoid (transparent with opacity=1) and red ellipsoid (transparent, opacity=0.8 and turned off depth test). The blue must be drawn last. To be safe, either the red or the blue object may also use polygonOffset. Here is the result:

I hope this would be enough for you to make what you need. If this is still not what you need, maybe you have to be very specific in describing what you need and also, share your code in a system like JSFiddle, CodePen, CodeSandBox, so that others could try it and provide more hints.

1 Like

Thanks, that’s exactly what I need. A basic material for the three object is enought or should I use more specific material.
One last thing, is it possible to know the number of the points or the triangle that are displayed?

No special material is needed. I used MeshLambertMaterial, but even MeshBasicMaterial should work too. As for number of vertices and triangles, I assume you ask for the intersection. Unfortunately, no, this approach does not provide this type of data. If you need it, you should try a more complex method, like using CSG. It can construct the intersection as a separate object and you can inspect its structure.

I am very interested in how you make the intersection part red. I was wondering if you could show me the code snippet or some samples in codeSandBox. Thanks a lot.

Here you go:

1 Like

Thank you so much!!!