Currently, I am in the process of constructing a model solar system and have been using THREE.Line to create orbits for my planets. Everything seems to be going well until you view the orbits from the front of a planet, revealing that they are actually being rendered behind the Meshes. Despite adjusting render order and depthwrite, I have not been able to achieve the desired effect where the orbit wraps around the planet. This should be a simple task in theory. In case you're wondering, the effect I am aiming for can be seen here: what i'm looking for, with a single orbit fully encircling the planet. The issue is illustrated by this image of what my problem looks like: [what i have][2].
Below is the function responsible for creating the orbits:
function MakeOrbit_2(base, color) {
function semiminor(a, e) {
return a * Math.sqrt(1 - (e * e));
}
var curve = new THREE.EllipseCurve(
foci(1000 * base[9], semiminor(1000 * base[9], base[0])), 0, // middle point
1000 * base[9], semiminor(1000 * base[9], base[0]), // xRadius, yRadius
0, 2 * Math.PI, // startAngle, endAnge
false, // clockwise
0 // rotation
);
var material = color;
var geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(points))
var orbit = new THREE.Line(geometry, material);
orbit.rotateX(- Math.PI / 2);
orbit.rotateZ(DegToRad(base[3]));//ascn
orbit.rotateX(DegToRad(base[2]));//inc
orbit.rotateZ(Math.PI + DegToRad(base[4]));//aop
scene.add(orbit);
return orbit;
}
I have included renderer.sortObjects = false; to ensure proper rendering of transparent atmospheres and clouds.
It's important to mention that less opaque lines behave differently compared to fully opaque ones.
Update: The peculiar effect was attributed to rounding errors as the scale exceeded billions of units, resulting in minimal differences in position that did not significantly affect the z-buffer.