Three.js Completely transparent material with specular map fully visible

205 Views Asked by At

I need to render a food tray with meat inside to showcase some packaging designs for a client. I am stuck at the material for the plastic film which encloses the tray's contents. I was planning to use a specular map or a normal map to obtain the glossy effect, but the only think I can get is fully transparent or fully shaded with specular map. Neither suits my purpose.

This is my current material setup:

"DbgIndex" : 1,
"DbgName"  : "plasticFilm",
"shading" : "Phong",
"colorDiffuse"  : [0.5, 0.5, 0.5],
"colorAmbient"  : [0.5, 0.5, 0.5],
"colorSpecular"  : [0.5, 0.5, 0.5],
"transparent" : true,
"transparency"  : 0.01,
"specularCoef"  : 100.0,
"mapSpecular"    : "film-bump.jpg",
"mapBumpScale" : 0.2,
"vertexColors" : false

Live code here. JSON tray file here.

In inspector the materials can be accessed with the following commands: showcase.scene.children OR showcase.materials

Thank you!

0

There are 0 best solutions below