MeshPhongMaterial looks like solid color

Questions
,
1

Screenshot_17
Screenshot_171375×746 73.7 KB

Screenshot_16
Screenshot_161357×734 178 KB

I use same code on each model. chair model material working good but on another model texture not appear, it is return solid color. How can i fix it?

let txt = new THREE.TextureLoader().load(e.texture);

                    txt.repeat.set( e.size[0], e.size[1], e.size[2]);
                    txt.wrapS = THREE.RepeatWrapping;
                    txt.wrapT = THREE.RepeatWrapping;

                    new_mtl = new THREE.MeshPhongMaterial({
                        map: txt,
                        shininess: e.shininess ? e.shininess : 10
                    });
                    setMaterial(theModel, activeOption, new_mtl);

                     function setMaterial(parent, type, mtl) {
                          parent.traverse((o) => {
                              if (o.isMesh && o.nameID != null) {
                                    if (o.nameID == type) {
                                         o.material = mtl;
                                    }
                              }
                          });
                       }
2

Try applying a different texture - maybe it’s an issue with UV mapping.

3

Can take only 2 values:
image
Can u share model file?

4

can you describe your lighting.
The flat surface would show as solid if using a directional light versus a point light.

5

bathroom.glb (1.5 MB)
chair.glb (2.0 MB)
yes, if you control model file i will so happy

6 
    var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61);
    hemiLight.position.set(0, -50, 0);

    scene.add(hemiLight);

    var dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
    dirLight.position.set(-8, 12, 8);
    dirLight.castShadow = true;
    dirLight.shadow.mapSize = new THREE.Vector2(5524, 5524);

    scene.add(dirLight);

but Lights same on two model too

7

Thre is no uv. Can you export to format OBJ to see is there uv will be in.

image
image782×82 5.26 KB

8

try a THREE.SpotLight or THREE.PointLight

eg,

const light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

directional and hemi lights produce parallel rays so won’t show a gradient colour on a flat surface. You could also add a normal map if you insisted on using directional lights.

EDIT:
Sorry I thought your problem was with lighting, but it is a texture problem you have. I don’t know the answer.

9

thanks. yes model dont have a uv maps

10

If need without uv in mesh data, then you can calculate uv in vertex shader.