Hi, i’m trying to see inside a cube occluding a part of a wall with other cube.
In the fiddle below is the basic scene set up, and what im trying to do is make the blue cube transparent and occlude that part of the wall of the grey cube to se inside of it there. I tried to do it with mesh.material.colorWrite property but i couldn’t do it.
http://jsfiddle.net/Turkoz14/4ojaz0mq/7/
Thanks!
Probably the best possible output without using custom shaders or changes to the geometry is this: http://jsfiddle.net/uLjzex4h/
So you set colorWrite to false for the smaller cube. Then you have to ensure that the bigger cube is rendered last. You can enforce this by setting Object3D.renderOrder to a higher value than 0.
However, this is still a hack and does not produce your intended result since you can’t see the back faces of the cube (so it’s not possible to look “inside” the cube, just through it). Because of this, a better solution is to make a hole in the geometry of the big cube. You can do this in a tool like Blender or dynamically by manipulating the geometry data in your code.
Another option might be the usage of the stencil buffer in order to define a “mask” for rendering (see https://github.com/mrdoob/three.js/pull/15611).
Thanks for the quick response, with the colorWrite and renderOrder I managed to achieve what you are saying but as you said it doesnt produce the result I’m looking for.
The thing is that making a hole in blender or a similar app does not produce what I’m looking for because te real project is to add windows to a cube, so with the window you can see inside like a real window of a house.
That been said, this could be a good option “dynamically by manipulating the geometry data in your code.”. Is there a way to add a object on the cube and make a hole like the geometry that is been adding ?
Not in an easy way. Sry, I can’t provide you a solution here. I only know that stuff like that can be really complex, especially if you want to properly handle edge cases.