Javascript 子对象绘图顺序

出现以下问题：

我试图在土星周围制造光环，但它们似乎以错误的顺序呈现：

问题是每个行星是如何被创造出来的。每个行星都是不同根对象（THREE.Object3d）的子对象，它包含一个bodyContainer（THREE.Object3d）。BodyContainer包含行星网格。当我将圆环网格添加到body或bodycontainer时，其渲染如上图所示

为了进行测试，我创建了一个“自由”球体和圆环，并添加了它们。对于直接添加到场景中的对象，所有操作都按照假定的方式进行

即使我将环作为球体的子对象添加到场景中，效果也很好

下面是我用来生成行星体的代码：

export default function generateBody(radius, basic, name) {


  var geometry = new THREE.SphereGeometry( radius, 24, 24 );
  var material;
  if(basic) {
      material = new THREE.MeshBasicMaterial({color: 0xFBE200});
  } else {
      material = new THREE.MeshLambertMaterial({
        //depthWrite: false,
        //depthTest: true,
      });

        if(textures[name].hasOwnProperty('map')) material.map = THREE.ImageUtils.loadTexture(textures[name].map);
        if(textures[name].hasOwnProperty('bump')) material.bumpMap = THREE.ImageUtils.loadTexture(textures[name].bump);
        if(textures[name].hasOwnProperty('specular')) material.specularMap = THREE.ImageUtils.loadTexture(textures[name].specular);
        if(textures[name].hasOwnProperty('normal')) material.normalMap = THREE.ImageUtils.loadTexture(textures[name].specular);
  }

  var mesh = new THREE.Mesh( geometry, material )
  mesh.scale.set( params.bodyScale, params.bodyScale, params.bodyScale );
  mesh.rotateX(Math.PI / 2);
  mesh.renderOrder = 0;

  return mesh;
}

以及我如何添加环：

  var circlemesh = new THREE.XRingGeometry(1.2 * (def && def.diameter || 139822000) * M_TO_AU / 2, 2 * (def && def.diameter || 139822000) * M_TO_AU / 2, 2 * 64, 5, 0, Math.PI * 2);
  var circleMaterial = new THREE.MeshLambertMaterial( {
    map: THREE.ImageUtils.loadTexture('../img/planet-textures/saturn/saturnringcolor.jpg'),
    alphaMap: THREE.ImageUtils.loadTexture('../img/planet-textures/saturn/saturnringpattern.gif'),
    //transparent: true,
    side: THREE.DoubleSide,
    //depthWrite: false,
    //depthTest: true
  });
  var mesh = new THREE.Mesh(circlemesh, circleMaterial);
  mesh.renderOrder = 1;
  this.body.add(mesh);

进一步：

this.bodyContainer.add(this.body)
this.root.add(this.bodyContainer)
scene.add(this.root)

对于直接添加到场景中的球体的测试，我只使用了一个普通球体几何体和此处使用的环的相同网格

        var circlemesh = new THREE.XRingGeometry(1.2 * 5, 2 * 5, 2 * 64, 5, 0, Math.PI * 2);
      var circleMaterial = new THREE.MeshLambertMaterial( {
        map: THREE.ImageUtils.loadTexture('../img/planet-textures/saturn/saturnringcolor.jpg'),
        alphaMap: THREE.ImageUtils.loadTexture('../img/planet-textures/saturn/saturnringpattern.gif'),
        transparent: true,
        side: THREE.DoubleSide,
        //depthWrite: false,
        //depthTest: true
      });
      var ringmesh = new THREE.Mesh(circlemesh, circleMaterial);
      //ringmesh.renderOrder = 1;
      //scene.add(ringmesh);

var SPHEREgeometry = new THREE.SphereGeometry( 5, 32, 32 );
var SPHEREmaterial = new THREE.MeshLambertMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( SPHEREgeometry, SPHEREmaterial );
//sphere.renderOrder = 0;
scene.add( sphere );

添加（环形网格）

---

解决问题的方法是增加摄像头的近距离。

---

材料中不需要额外的参数。

解决问题的方法是增加相机的近距离。

---

材质中不需要额外的参数。

以下是如何在父子设置中使用Object3D的三种方法：

---

以下是如何在父子设置中使用Object3D的三种方法：

---

当您为材质设置depthTest:true、depthWrite:true，然后注释掉mesh.renderorder语句时会发生什么情况？@pprchsvr nothing更改此设置以查看是否有帮助。depthTest和depthWrite在任何情况下都默认为true。@谢谢，它在fiddle ok中工作，但在应用程序中不工作。我认为这可能与父母的旋转和位置设置有关。如果为材质设置depthTest:true，depthWrite:true，然后注释掉mesh.renderorder语句，会发生什么情况？@pprchvr nothing会改变这一点，看看它是否有帮助。depthTest和depthWrite在任何情况下都默认为true。@谢谢，它在fiddle ok中工作，但在应用程序中不工作。我认为这可能与父母的轮换和位置设置有关。

var root = new THREE.Object3D();
var rootcontainer = new THREE.Object3D();
root.parent = rootcontainer;
mesh = new THREE.Mesh( geometry, material );
root.add( mesh );
rootcontainer.add(root);
scene.add(rootcontainer);