Question

遇到以下问题：

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

关键是每个星球的创造方式。每个行星都是不同根对象（THREE.Object3d）的子节点，它包含一个bodyContainer（THREE.Object3d）。 BodyContainer包含行星网格。当我将环网格添加到主体或主体容器时，它将呈现在上图中。

对于测试，我创建了一个免费的＆＃39;我添加了球体和戒指。到场景，一切都像直接添加到场景中的对象一样。

即使我将环添加为添加到场景中的球体的子项，它也能正常工作。

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

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

解决问题的方法是增加相机附近。不需要材料中的额外参数。

Answer 2

以下是如何在THREE中的父子设置中使用Object3D：

Object3D Parent Child Fiddle

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);

子对象绘制顺序

2 个答案: