How can ensure my group and its content dont go into the dark side during rotations

Questions
,
1

Hello friends

I have a cell volume group that includes a lots of little round circles. When i rotate the group at certain angles some of the circles including the yellow volume outline disappear only to reappear later. I have tried adding lights as well, but still experiencing this issue. Here is a vidoe of it to show you the issue:

here is a code fragment of lights added:

 hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
        scene.add( hemiLight );

        dirLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
        dirLight.position.set( 200, 200, 200 );
        scene.add( dirLight );

        let dirLight1 = new THREE.DirectionalLight( 0xffffff, 1.0 );
        dirLight1.position.set( 0, 0, 0 );
        scene.add( dirLight1 );


        // ambient - let the light follow the object at all times
        ambientLight = new THREE.AmbientLight( 0xffffff, 1.0 ); // increasing this one will intensify the front side of the mesh
        scene.add( ambientLight ); // optional


        var light = new THREE.PointLight( 0xffffff, 0.9 );
        scene.add( light ); // optional

Thanks in advance for any insight on this

2

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100); Increase the last parameter

2 Likes
3

There are two factors because of which this is happening, the first factor is already mentioned by @eze.

You have to increase the far distance of your PerspectiveCamera. Default is 2000 try to crank it up more and see if the results get better.

const camera = new THREE.PerspectiveCamera(75, window.innderWidth / window.innerHeight, 0.1, 10000)

The second factor that can effect this is if the spheres are not lying in the cameras frustum. To make the objects not disappear even though they are not in the frustum you should set frustumCulled to false.

const sphere = new THREE.Mesh( new THREE.SphereGeometry( 15, 32, 16 ), new THREE.MeshBasicMaterial( { color: 0xffff00 } ) ); 
sphere.furstumCulled = false;
scene.add( sphere );
4

Thanks @eze and @AshhadDevLab. I tried both recommendations and still the same issue exists. Mind you i am using OrthographicCamera not perspetiveCamera. But i did increase the far value to a much higher numbers. Did i miss anything here that i can still try?

Thanks

5

After you change the .far on the camera, you have to call:

camera.updateProjectionMatrix() ?

6

Thanks @manthrax. Yes i tried that as well. I increase the far to even 30000.
But still seeing the same problem.

7

To me it looks like the front side is being cut. There are three possible reasons:

  • the near of the camera is too big (the near for ortho could be 0, or even negative, afair)
  • there is some overlapping with non-well-ordered transparent elements (when the foggy cloud is removed it is still happening?)
  • something else.

Only the person who can debug the code could find the actual reason. We can only throw guesses.

1 Like
8

Try setting near -2000, and far to +2000
and camera.updateProjectionMatrix()
(- values for near only works for orthocameras tho.)

For perspectiveCameras the near plane should always be > 0 or you get inverted coordinates.

Generally you want near and far to be as close together as possible, while still properly rendering everything in your scene. If you set them Reaally far apart, you force the depth buffer to cover a larger range, and you lose precisions in depth testing, causing z-fighting.

9

Hi @PavelBoytchev. Yes when we remove the foggy cloud it is still happening. I did experiment with changing the near and far values to -2000, +2000. But it is not doing it. How about left, top, right, bottom numbers for the ortho camera. Any suggestions there?

10

Ok guys, the -2000, +2000 did it. Thanks to both @manthrax and @PavelBoytchev.
The reason that my change a few minutes did not work was due to another piece of code overwriting these values. Thanks again for all your helps.

1 Like
11

Nice! Glad u found it!