дочерние объекты рисования порядка

Question

Есть следующая проблема:

им пытаются сделать кольца вокруг Сатурна, но мне кажется, что они каким-то образом оказывается в неправильном порядке:

Дело в том, как каждая планета создано. Каждая планета является дочерним элементом другого корневого объекта (THREE.Object3d), который содержит bodyContainer (THREE.Object3d). BodyContainer содержит планету. Когда я добавляю сетку колец к телу или контейнеру кузова, он отображается как на картинке выше.

Для испытаний ive создала «свободную» сферу и кольца, которые добавили ive. на сцену, и все работает так, как предполагается, для объектов, добавленных непосредственно на сцену.

Даже если я добавляю кольца в качестве ребенка сферы, которая добавляется на сцену, она отлично работает.

Вот код, я использую для создания тела планеты:

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

сфера.add (ringmesh);

Answer 1

Что исправили проблему увеличивал вблизи камеры. Никаких дополнительных параметров в материале не требуется.

Answer 2

Вот как вы можете использовать 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);