Question 299537 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Three.js MeshPhongMaterial is no longer "shiny" after a texture is applied

If you look at the following codepen, you’ll see a white, shiny "cup" which is a .glb that been loaded in using Three’s GLTFLoader:

https://codepen.io/snakeo/pen/XWOoGPL

screenshot

However, when I apply a texture on a portion of the mug the shiny cup turns into a dull and spotty cup:

dull

You can apply the texture on the Codepen by uncommenting line 102:

// Create MeshPhongMaterial with the texture
const phongMaterial = new THREE.MeshPhongMaterial({
   color: 0xFFFFFF,       // White color for the ceramic look
   shininess: 30,         // Adjust shininess for the ceramic effect
   specular: 0x222222,    // Specular color
   // map: texture           // Apply the texture
});

The image only appears on the "face" of the cup.

I’m not sure why this transformation occurs. I’m kind of new to this and hoping for some guidance.

Thank you.

I’ve tried changing texture.wrapS, texture.wrapT and texture.repeat with strange results, none of which cause the cup to be white and shiny again.

Tags:

2

Answers


  1. 0

    MeshPhongMaterial is not that great once once working with shiny or glassy materials, yes it is lighter for the GPU but may never look as good as you want!

    So, other options are avilable, like MeshStandardMaterial. This one is quite amazing and not that heavy on the performance.

    Yet, if you only need that cup, or simply a single object, then you may use MeshPhysicalMaterial. This one is way better with extra Clearcoat, Physically-based transparency, Advanced reflectivity, and Sheen.

    Using textures on those material wont effect how shiny should they look like. If you really only want to use MeshPhongMaterial, for some reason, then see this example. Note: you can check the code by opening the inspector or search for the name of the file if you have the Three.js GitHub repo downloaded, like (#webgpu_lights_phong) in the examples directory. Note: the codepen attached wasn’t working for me for some reason, yet got what you meant and tried to help as much as I can!

    Extra Useful Links

    Best physical material example

    Transparency in the Physical material

    Using Physical Material in practice (YouTube)

    Textures & Texture Mapping in Three.js (YouTube)

    Login or Signup to reply.
  2. 0

    I assume you tried increasing shininess and specular, for example (shininess: 100, specular: 0x444444), but you are not satisfied.

    Did you try MeshStandardMaterial:

    const standardMaterial = new THREE.MeshStandardMaterial({
         color: 0xFFFFFF,
         roughness: 0.4,
         metalness: 0.7,
         map: texture 
      });

    But I assume that you need for some reason MeshPhongMaterial, so try this approach

    const originalSpecularMap = mesh.material.specularMap;
const phongMaterial = new THREE.MeshPhongMaterial({
         color: 0xFFFFFF,
         specularMap: originalSpecularMap,
         shininess: 60,
         map: texture,
         specular: 0x666666,
         emissive: 0x444444,
         emissiveIntensity: 0.6
      });

    You can play with these values, I think you can easily get desired result.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search