Needs to remove flickers from texture overlapping

image

Hello I am new beginner in three js.

I want to add normal map in my existing object.

I tried lot and normal map is also appear but it seems flickering the object.

I used following code for normal map.

// NOTE: My three js version is
// var THREE = { REVISION: ‘73’ };
var shellCustomMap = loader.load( shell_media, function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0,0 );
texture.repeat.set( 2, 2 );
} );
var shellCustom = new THREE.MeshPhongMaterial({ shininess: 100, specular:0x111111, normalMap: shellCustomMap });

var currentMat = shellMesh.material;
shellMesh = child;
shellMesh.material = currentMat;
var shellInside = shellMesh.clone(); // Cloning procedure.
shellInside.material = shellCustom;
mesh.add(shellInside);

Can you please help me out to remove flicking and getting normal map properly without any flickering effect.

My output would be like this.

image

It seems from your code that you added two identical meshes to the scenes, in which case the polygons are coplanar and you’re sure to end up with Z-fighting.

2 Likes

Hello

I don’t have more ideas about Z-fighting.
I have read the documentation but i don’t know how we can implement in the three js.

You’ve added two meshes occupying the same space (shellMesh and shellInside). In that situation, parts of each mesh may render over one another, causing the flickering you see (this is the z-fighting @felixmariotto refers to) . If you’re trying to add a normalMap to the first mesh, there’s no need to create a second mesh. Instead:

shellMesh.material.normalMap = shellCustomMap;

Also note that r73 is a very old version of three.js. Newer documentation and examples will work best with the current version instead.

1 Like

I already tried this
var shellCustomMap = loader.load( shell_media, function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0,0 );
texture.repeat.set( 2, 2 );
} );
shellMesh.material.normalMap = shellCustomMap;

But it was not working in r73. And product is already developed since long time so if i cannot upgrade threejs version because when i am upgrading that then it stopped to working my entire product.

Also, i used following code for reflect normal map but it shows error in r73 that loadTexture is undefined.

var normalMap = THREE.ImageUtils.loadTexture(’<>’);

shellMesh.material.normalMap = normalMap;

Any other way to change normalMap instead of above code?