CODEWITHSUNDEEP
javascriptthree.js
user5280885
user5280885

Reputation:

THREE.js - Render an Object only when in front of another object

Is it possible to only Render the Part of Object 2 that obscures Object 1.

Essentially using Object 1 as a mask? Trying to recreate the effect of CanvasRenderingComposite destination-in in 3D using THREEjs

enter image description here

Upvotes: 1

Views: 713

Answers (1)

M -
M -

Reputation: 28497

I think you're looking to change the Material.depthFunc attribute. By default, it's set to LessEqualDepth, and according to the documentation:

LessEqualDepth is the default and will return true if the incoming pixel Z-depth is less than or equal to the current buffer Z-depth.

That means that choosing the opposite would give you the result that you want: either with GreaterEqualDepth or GreaterDepth:

GreaterEqualDepth will return true if the incoming pixel Z-depth is greater than or equal to the current buffer Z-depth.

You should be able to get the desired result with:

object2.material.depthFunc = THREE.GreaterEqualDepth;, or assigning it as an option when creating the material.

If you want to look at the other depthFunction possibilities, you can take a look at the Materials constants page and scroll down a little to the "Depth Mode" section.

Upvotes: 1

Related Questions