Hi I’m working on a product placement scene with Three.js
I have a scene with a video background texture running and a loaded gltf mesh.
However i need a part of the loaded mesh to be transparent/hidden and show the background video it otherwise is hiding so that the loaded object appear to be partially behind an object that exists only in the video background.
I’m very new to three.js but i assume there must be either:
- a way to create a material shader that makes a mesh/plane transparent but by registering depth somehow prevents what is behind it from showing up and therefore those pixels show the background texture of the scene.
- there must be a way to keep track of all the pixels coordinates that correspond in the camera view to the plane used to hide parts of an object and somehow rewrite those pixels with the corresponding pixels in the background when the scene renders.
According to this http://jsfiddle.net/4vnsbdz6/1/
if only dealing with occlusion of meshes without specifically showing a background texture it works if you set the material for the occlusion plane
mesh.material.colorWrite = false;
and then use
mesh.renderOrder = 0; to draw the background mesh first
there doesn’t appear to be a way to force the background texture to be rendered first
the source code fix at https://github.com/mrdoob/three.js/pull/15323
renderer.backgroundRenderOrder = -Infinity // background will be rendered first
doesn’t work sadly
Could you help me understand how one goes about implementing either of this strategies or let me know if a better way exists to solve the problem?
Any help would be greatly appreciated.
Thanks in advance.