I have been working on creating an object with the following code:
const geometry = new THREE.SphereBufferGeometry(2,100,100);
const material = new THREE.MeshPhongMaterial({
map: myImage,
transparent: true,
side: THREE.DoubleSide,
opacity: 0.8
});
const mesh = new THREE.Mesh(geometry, material);
The material I used has some transparency and I specifically want only the non-transparent parts to cast a shadow, so I included:
mesh.customDepthMaterial = new THREE.MeshDepthMaterial({
depthPacking: THREE.RGBADepthPacking,
alphaTest: 0.4,
map: image
});
Everything renders perfectly in the scene. However, upon inspecting the scene, I noticed that the customDepthMaterial property is present on the mesh.
Interestingly, when I try to convert the scene to JSON using scene.toJSON(), the property related to customDepthMaterial is not included for that particular mesh (and if I load the JSON back into the scene, the transparency effect is lost due to the absence of customDepthMaterial).
Could this behavior be intentional? Or perhaps it's a bug in the system? Or maybe there's something incorrect in my approach?