Javascript 使用边辅助对象和半透明对象渲染错误

我正在尝试创建一个有三个js的地球，这是一个升级版本。我遇到的问题是，即使在我添加到场景中的代码中，首先是天空，然后是地球，最后是大气，渲染接缝不理解这个顺序，a也会响应这个顺序

现在，当我放大并靠近地球对象时，渲染工作正常，并给出了响应

正如您所看到的，问题还在于

THREE.edgeHelper

在长缩放级别中，它在某些部分被渲染，甚至认为它在地球后面，但在短缩放级别中，它工作得非常完美。有没有办法克服这个问题？以下是创建球体的所有代码：

function earthView(){
if (!scene){
    main();//here i create the controls,camera,scene,renderer etc
}

// create the geometry sphere stars
var geometry  = new THREE.SphereGeometry(6371000000, 36, 36)
// create the material, using a texture of startfield
var material  = new THREE.MeshBasicMaterial()
material.map   = THREE.ImageUtils.loadTexture('images/earthView/ESO_-_Milky_Way.jpg')
material.side  = THREE.BackSide
// create the mesh based on geometry and material
var mesh  = new THREE.Mesh(geometry, material)
mesh.position.set(0,0,-6371000)

scene.add(mesh)


//earth
var geometry   = new THREE.SphereGeometry(6371000, 36, 36)
var material  = new THREE.MeshPhongMaterial()
var earthMesh = new THREE.Mesh(geometry, material)
//earthMesh.position.set(0,-6371000,0)
//earthMesh.rotation.set(0,-Math.PI/2,0)
helper = new THREE.EdgesHelper( earthMesh );
helper.material.color.set( 0xffffff );

 
material.map    = THREE.ImageUtils.loadTexture('images/earthView/earthmap1k.jpg')
material.bumpMap    = THREE.ImageUtils.loadTexture('images/earthView/earthbump1k.jpg')
material.bumpScale = 100


material.specularMap = THREE.ImageUtils.loadTexture('images/earthView/earthspec1k.jpg')

scene.add(earthMesh);
scene.add( helper );


//atmosphere
var geometry   = new THREE.SphereGeometry(7365000, 36, 36)
var material  = new createAtmosphereMaterial()
material.uniforms.glowColor.value.set(0x00b3ff)
material.uniforms.coeficient.value  = 0.1
material.uniforms.power.value       = 2.0
//material.side = THREE.BackSide
var earthAtmo = new THREE.Mesh(geometry, material)
//earthAtmo.position.set(0,0,-6371000)

scene.add(earthAtmo);


/**
 * from http://stemkoski.blogspot.fr/2013/07/shaders-in-threejs-glow-and-    halo.html
 * @return {[type]} [description]
  */ 

function createAtmosphereMaterial(){
  var vertexShader  = [
    'varying vec3 vNormal;',
    'void main(){',
    '   // compute intensity',
    '   vNormal     = normalize( normalMatrix * normal );',
    '   // set gl_Position',
    '   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
    '}',
].join('\n')
var fragmentShader  = [
    'uniform float coeficient;',
    'uniform float power;',
    'uniform vec3  glowColor;',

    'varying vec3  vNormal;',

    'void main(){',
    '   float intensity = pow( coeficient - dot(vNormal, vec3(0.0, 0.0, 1.0)), power );',
    '   gl_FragColor    = vec4( glowColor * intensity, 1.0 );',
    '}',
].join('\n')

// create custom material from the shader code above
//   that is within specially labeled script tags
var material    = new THREE.ShaderMaterial({
    uniforms: { 
        coeficient  : {
            type    : "f", 
            value   : 1.0
        },
        power       : {
            type    : "f",
            value   : 2
        },
        glowColor   : {
            type    : "c",
            value   : new THREE.Color('blue')
        },
    },
    vertexShader    : vertexShader,
    fragmentShader  : fragmentShader,
    side        : THREE.FrontSide,
    blending    : THREE.AdditiveBlending,
    transparent : true,
    depthWrite  : false,
});
return material
}

}

定义渲染器时，我使用

renderer.sortObjects=false

，以便按照对象在场景中添加的顺序渲染对象

小结：在所有的缩放级别中，获得像pic2一样渲染的辅助对象和大气

---

更新提示：1.这可能是图形卡的问题吗？2.我使用的像素距离可能是问题吗？

此问题已在上得到回答。因此设置

对数深度缓冲区：true

完成了工作

renderer.sortObjects=true

与您描述的效果相反。是的，我错了，我编辑了它