javascript - 子对象绘制顺序

Question

遇到以下问题:

我试图在土星周围制作环，但似乎它们以某种方式以错误的顺序呈现:

问题是每个行星是如何创造的。每个行星都是不同根对象 (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 );

sphere.add(ringmesh);

Answer 1

解决这个问题的方法是增加相机的距离。不需要 Material 中的额外参数。