On my OpenGL app I simulate a kind of metal/glass reflection effect using a texture with
glEnable(GL_TEXTURE_GEN_S);
glEnable(GL_TEXTURE_GEN_T);
and GL_COMBINE_RGB using GL_TEXTURE_ENV_COLOR.
So with env_color 100% I get a metal reflection effect and with 0% I get a flat material.
How can I achieve this effect with Three.js ?
What this code does is it enables the automatic generation of texture coordinates with OpenGL. Such a feature is not available with WebGL.
I’m not familiar with texture combiners so I’m not sure how this would work in WebGL.
Please keep in mind that WebGL has to run on many different devices which use a wide set of native 3D APIs like OpenGL, DirectX or Vulkan. WebGL does not support features of native 3D APIs which have to be emulated in software on all others.
Consider to use MeshPhongMaterial with a low shininess value e.g. 15.
If you want to use a PBR material, use MeshStandardMaterial or MeshPhysicalMaterial with a high roughness value e.g. 1.
Hi Michael, I realised that what I wanted to achieve, on Threejs is called “envMap”. So I did it and it works well with a Phong material. I paste here the basic code for the other devs to know
texture = textureLoader.load(imagePath);
texture.mapping = THREE.EquirectangularReflectionMapping;
material.envMap = texture;
material.reflectivity = reflectivity; // from 0.0 to 1.0
a low reflectivity plus a little shininess gives you a nice plastic reflecting material effect
On my original macOS OpenGL app I get this
On Threejs the same model gives me this result. Very good! Yeah, still some difference, but I am a newbie on Threejs.
The best is the movie, taken from my browser Safari
I’m going to try the roughness as you suggested. I’ll tell you ASAP. Thank you.
