After a texture is added, the shine of the Three.js MeshPhongMaterial diminishes

Question

After a texture is added, the shine of the Three.js MeshPhongMaterial diminishes

Check out this intriguing Codepen showcasing a white, glossy "cup" loaded using Three's GLTFLoader:

However, when I try to add a texture to a section of the mug, the shiny cup mysteriously transforms into a lackluster and patchy version:

You can experiment with applying 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 is only displayed on the "face" of the cup.

I'm puzzled by this sudden change. As a newcomer in this field, any guidance would be greatly appreciated.

Thank you.

I've experimented with altering texture.wrapS, texture.wrapT, and texture.repeat without success, leading to strange outcomes that do not restore the original white and shiny appearance of the cup.

javascript three.js 3d rendering render

Answer 1

Answer №1

MeshPhongMaterial may not be the best choice when working with reflective or glassy materials. While it is more GPU-friendly, it may not achieve the desired visual quality.

There are other alternatives available, such as MeshStandardMaterial, which offers impressive results without sacrificing performance.

Alternatively, if you only need to work with a specific item like a cup or a single object, consider using MeshPhysicalMaterial. This material provides enhanced features like Clearcoat, Physically-based transparency, Advanced reflectivity, and Sheen.

Keep in mind that applying textures on these materials will not compromise their shiny appearance. However, if you must use MeshPhongMaterial for some reason, you can refer to this example. Please note that you can also inspect the code by accessing the Three.js GitHub repository (#webgpu_lights_phong) or opening the inspector tool.

Additional Helpful Resources

Check out this physical material example

Learn about transparency in Physical material

Watch a practical demonstration of using Physical Material (YouTube)

Explore Textures & Texture Mapping in Three.js (YouTube)

Answer 2

MeshPhongMaterial may not be the best choice when working with reflective or glassy materials. While it is more GPU-friendly, it may not achieve the desired visual quality.

There are other alternatives available, such as MeshStandardMaterial, which offers impressive results without sacrificing performance.

Alternatively, if you only need to work with a specific item like a cup or a single object, consider using MeshPhysicalMaterial. This material provides enhanced features like Clearcoat, Physically-based transparency, Advanced reflectivity, and Sheen.

Keep in mind that applying textures on these materials will not compromise their shiny appearance. However, if you must use MeshPhongMaterial for some reason, you can refer to this example. Please note that you can also inspect the code by accessing the Three.js GitHub repository (#webgpu_lights_phong) or opening the inspector tool.

Additional Helpful Resources

Check out this physical material example

Learn about transparency in Physical material

Watch a practical demonstration of using Physical Material (YouTube)

Explore Textures & Texture Mapping in Three.js (YouTube)

Answer 3

Answer №2

If you've already experimented with adjusting the shininess and specular properties, like setting them to shininess: 100 and specular: 0x444444, without success.

Have you considered using MeshStandardMaterial instead?

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

However, if you specifically require MeshPhongMaterial, you can try this alternative 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
      });

Feel free to experiment with these settings to achieve your desired outcome easily.

Answer 4

If you've already experimented with adjusting the shininess and specular properties, like setting them to shininess: 100 and specular: 0x444444, without success.

Have you considered using MeshStandardMaterial instead?

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

However, if you specifically require MeshPhongMaterial, you can try this alternative 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
      });

Feel free to experiment with these settings to achieve your desired outcome easily.

After a texture is added, the shine of the Three.js MeshPhongMaterial diminishes

Answer №1

Additional Helpful Resources

Answer №2

Similar questions

What could be the reason for this JavaScript malfunctioning in both Chrome and Safari browsers?

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

Switch out a character with its corresponding position in the alphabet

Creating a dynamic tbody element on button click with the help of javascript or jquery

Issue arises when trying to implement sidebar navigation in Angular with Materialize CSS

Creating a calculator with JQuery and encountering challenges with performing multiple calculations

Troubleshooting problems with AngularJS placeholders on Internet Explorer 9

Exploring the concept behind the Javascript ternary statement code snippet

Open the HTML document and access the file contents

Protecting an AJAX interface against unauthorized exploitation by external websites

What is the best way to streamline the creation of a "products filter" using Node.js and Angular?

Preventing a webpage's CSS from affecting an iframe loading an HTML document

HTML integration of JavaScript not working as expected

Tips for displaying Facebook comments with JavaScript

Arrays contain multiple elements, not just a single item

Creating a response in Node JS

Javascript is not recognizing if and elseif conditions

How can you implement a bootstrap navigation bar in a vue.js project?

The AJAX callback is unable to access the method of the jQuery plugin

In my React JS project, I am using an <Add /> component on two distinct pages. However, I am encountering an issue where only one of the pages is correctly receiving the add count prop