问题
I'm trying to convert the lighting on a MeshPhongMaterial:
So that the visible portion is transparent to the dom element beneath it. I just want to keep the shadows. If I use a ShadowMaterial, I lose the radial lighting effect and just get the shadows from the objects:
I tried applying a transparent png texture as the map to the MeshPhongMaterial but it shows as fully transparent with no shadows.
Here is the effect I am trying to recreate (produced using html5 canvas drawing):
Thank you in advance!
回答1:
I came up with a solution that will technically work. I created another webgl canvas and three.js scene. In the new scene I created a single plane that uses a CanvasTexture of the first canvas as its material's alphaMap. I then had to write a shader that inverted the colors on the first canvas. This was applied using THREE.EffectComposer. Still needs some tweaking but this was the result:
来源：https://stackoverflow.com/questions/53993098/three-js-cast-shadows-on-a-transparent-material