Why the texture is unstable when I move camera?

Questions
,
1

unstable-texture

As you can see above.

    // light
    let light = new THREE.AmbientLight(0xffffff)
    // I use OBJLoader to load the model of dolphin
    // load a group of image to 'build' the house refer to https://threejs.org/examples/webgl_panorama_cube.html

Why the texture is unstable when I move camera?

texture of the dolphin
texture of the dolphin1024×364 38.3 KB

texture of the dolphin

2

it looks like your meshes are overlaping each other.
You can either make some more space between overlaping faces or increase near parameter in your camera

3

Thanks for your reply, increasing near parameter is no effect, maybe it is overlaping between faces cause that.

I can’t confirm that( because the dolphin model is downloaded from… I dont know where ), I have create some simple cube, but they are well-behaved, maybe it’s too simple?..

image

4

Hi!
Do you have link to the live code example with that model?

5

There are triangles in there overlapping almost for sure.

6

You’re experiencing z-fighting. Here’s a quick video demonstrating the effect and an explanation on Wikipedia

In essence, this happens a lot in 3D graphics when 2 planes occupy the same space, so the renderer doesn’t know which plane is in front of the other, and it flickers like that.

Just make sure the base of the dolphins isn’t being duplicated when you’re importing them. Also, since you don’t know where you downloaded the dolphin assets from, it might be an issue with the assets and not your code. It’s hard to tell without a code sample. It has nothing to do with ambient light, and changing the near parameter won’t fix it.

7

Sorry I don’t have it, I got it from my colleague, I am a front-end coder, model is unfamiliar to me…

8

Thanks for your simple and clear reply, although the problem still exist, I will be cautious in importing model.