0

Trying to get into three js and following some tutorials here and there but I'm stuck on some very basic stuff I feel, that I can't find the solution to.

The problem I have is shown better on the gif below, it's those weird artifacts in the smaller spheres that also happen when the yellow spheres go behind the red one only this time the red one is the one glitching out. I tried different base materials (phong, standard, basic) and also played with the opacity and roughness to make sure I don't have a transparent or reflective material but nothing. Some context for the scene: It's just a big sphere (S) that's standing still and there are 2 smaller spheres (s1 the smaller of the two and s2 the bigger of the two) that are orbiting it. s1 is orbiting tangentially to S surface and s2 center is on the surface of S (so it's half inside S and half outside of it).

Any ideas?

Big red sphere (S), small yellow sphere (s1), big yellow sphere (s2)

Here's my code for the renderer:

    var renderer = new THREE.WebGLRenderer({antialias: true},{ alpha: true });
    renderer.setClearColor(0x000000, 0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

And here's my code for the spheres:

    var geometry = new THREE.SphereGeometry(0.5, 32, 32);
    var material = new THREE.MeshStandardMaterial (
        {
            color:"red"
        }
    );
    var point = new THREE.Mesh(geometry, material);

And one ambient light:

    var light = new THREE.AmbientLight(0xffffff, 1);
    scene.add(light);
Monochromatic
  • 172
  • 13
  • 2
    This looks like z-fighting. You can [read about it here](https://en.wikipedia.org/wiki/Z-fighting). The solution is to move your objects further away from each other, or set the `camera.near` value higher and `camera.far` value lower so your depth channel doesn't get spread out too thin across a long distance. What are your camera `near/far` values set to right now? – M - Feb 01 '23 at 18:16
  • @Marquizzo Thank you! That was it. I had the near property too low (0.1) but I set it to 10 and it's fine. – Monochromatic Feb 02 '23 at 00:33

1 Answers1

0

Solution was found by Marquizzo in his comment: The camera.near property was too low and I had to adjust it.

Monochromatic
  • 172
  • 13