How to show an object inside another?

Questions
,
1

Hi.

I have a ball (1) that is inside the box (2).
I want to render the scene so that the ball can be seen. But not with the transparent walls of the box (3). I want the ball to be visible through the opaque walls (4).
question

I see such a solution: render the ball and the box separately. Then lay a translucent ball on the box. But I do not know how to do it.
I can render the box, reset the depth buffer and render the ball. But in this case the ball will be on top of the box and the walls of the box in front of the ball are not visible.
Maybe I should use EffectComposer.
Is it possible to do this?

Thanks.

2

You could render the back side of one box. Render a transparent front side of another box and then render the sphere inside the box, all in the same scene using a trick of rendering front and back sides of meshes and transparency.

This is by no means the correct solution. It just so happens I’ve been using this recently and the idea came to mind. It might help you or someone else think of a better solution.

Demo here - https://codepen.io/danlong/pen/ZmZVbM?editors=0010

Look at the addMeshes function, around line 33

3

You can render sphere after rendering box, heres an example:

Edit: there’s also material.side property, thats probably a better solution
example:

4

Thanks for answers. But unfortunately, this is not exactly what is required.

In the first case, we have a transparent box. In the second ball in front of the box.

I want the ball to be visible through the opaque walls of the box. As in the x-ray machine. But in ordinary colors.

P/S. Based on the information received, I had an idea. I’ll try to test it and share the results.

5

Forked from MateuszWis’s example…

I added a third pass for a transparent cube on top of the sphere.

I think there should be a better way to do this by playing around with renderer.sortObjects = false and setting the object’s sortOrder manually…

6

Yes, this is exactly the result I want.
But here I see a problem with a double box render.

7

Here is the method by which the problem was solved: KnotInBox on JSFiddle
Thanks for your help and ideas.

1 Like
8

I noticed that after one of the updates, the method stopped working. Corrected and updated the example.

9

There is this answer in Stack Overflow that seems to explain and use the same method that Signa used in his solution: three.js - How to change the zOrder of object with Threejs? - Stack Overflow