Needs to remove flickers from texture overlapping

Questions
,
1

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

2

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
3

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.

4

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
5

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?