CODEWITHSUNDEEP
three.jstextures
Chris Sobolewski
Chris Sobolewski

Reputation: 12925

Texture looks like one flat color, lacking detail of image, in three js

I am attempting to modify the ThreeJS materials example seen here, and have been fairly successful so far in reverse engineering it in to my own minimalist demo.

The problem comes when I attempt to modify the materials.

I have changed mlib["Orange metal"] to the following:

"Orange metal": new THREE.MeshLambertMaterial( { 
    map: carTexture, 
    envMap: skyBox, 
    combine: THREE.MultiplyOperation
 } )

carTexture is a reference to the following:

var carTexture = THREE.ImageUtils.loadTexture('texture/blue.jpg');
carTexture.wrapS = carTexture.wrapT = THREE.RepeatWrapping;
carTexture.repeat.set(3,3 );
carTexture.wrapS = THREE.RepeatWrapping;
carTexture.wrapT = THREE.RepeatWrapping;

And while this has changed my final output, the detail in the texture is missing.

For reference: here is the texture file:
Metetalic flake texture
Which clearly has a metalic flake texture.

Meanwhile my final product looks like this:
enter image description here
Completely smooth.

Yet, if I add a taurus with the exact same texture, I can see the details quite clearly:

with taurus

I have played around with the dimensions of the texture file (up to several thousand percent), and the reflectivity of the MeshLambertMaterial, but not been able to see any change at all.

Upvotes: 0

Views: 680

Answers (1)

2pha
2pha

Reputation: 10155

Your model needs UV coordinates.
On a model like this, it will need to be done in 3d software such as 3ds Max, Maya etc.
If you could get your hands on a version of the model which already has the correct UV coordinates set it would save you all the hassle.
Setting up UV coordinates is not so easy on a model like this if you have never done it before.
An alternative may be generate your paint flake in your shader (without using UV) rather than in a texture (I willl soon be attempting this myself for a personal project).

HERE are some youtube videos on UV unwrapping in 3ds Max

Upvotes: 1

Related Questions