BackSide der äußeren geom nicht sichtbar, wenn innen geom (THREE.JS R76)

Question

Ich habe zwei zylinderGeometries mit dem Tunnel innerhalb der Tunnel Wrap. Ich habe eine PNG-Textur mit Transparenz zum Tunnel und eine schwarze Farbe zum Wickel. Ich beabsichtige, die Transparenz des tunnelWrap als AlphaMap Opacity Workaround zu reduzieren.

Der TunnelWrap erscheint im Inneren des inneren Tunnels als transparent. Warum ist das? Ich habe es mit viel größeren Radien versucht und es war das gleiche Ergebnis.

function addTunnel(){ 
    var cylTexture = loader.load("wormhole2.png"), 
     cylGeom = new THREE.CylinderGeometry(5000, 5000, 50000, 32, 32, true), 
     cylMat = new THREE.MeshPhongMaterial({ 
      map: cylTexture, 
      side: THREE.DoubleSide, 
      transparent: true 
     }), 
     cyl = new THREE.Mesh(cylGeom, cylMat); 

    cylTexture.wrapT = THREE.RepeatWrapping; 
    cylTexture.wrapS = THREE.RepeatWrapping; 
    cyl.name = "tunnel"; 
    scene.add(cyl); 
    scene.getObjectByName("tunnel").position.z = -12000; 
    rotateObject(scene.getObjectByName("tunnel"), -90, 0, 0); 
    octree.add(scene.getObjectByName("tunnel")); 
    tunnel = scene.getObjectByName("tunnel"); 
} 

function addTunnelWrap(){ 
    var cylGeom = new THREE.CylinderGeometry(5100, 5100, 50000, 32, 32, true), 
     cylMat = new THREE.MeshBasicMaterial({ 
      color: 0x000000, 
      side: THREE.BackSide, 
      transparent: true 
     }), 
     cylWrap = new THREE.Mesh(cylGeom, cylMat); 

    cylWrap.name = "tunnelWrap"; 
    scene.add(cylWrap); 
    scene.getObjectByName("tunnelWrap").position.z = -12000; 
    rotateObject(scene.getObjectByName("tunnelWrap"), -90, 0, 0); 
    tunnelWrap = scene.getObjectByName("tunnelWrap"); 
    tunnelWrap.material.opacity = 1.0; 
} 

Answer 1

Ich denke, Sie haben die Rückseite und Doppelseiten durcheinander.

machte ich eine Geige http://jsfiddle.net/cg0aayw5/

Vielleicht ist dies nicht richtig ist, ist es schwierig, die Frage zu entziffern.

Die Geige verwendet eine Farbe anstelle einer Textur und eine Animation der Deckkraft, um den Effekt der Opazität auf der Innenseite des Zylinders zu zeigen.

function addTunnel(){ 
    cylGeom = new THREE.CylinderGeometry(500, 500, 500, 32, 32, true); 
    cylMat = new THREE.MeshBasicMaterial({ 
    color: 0xFF0000, 
    side: THREE.FrontSide, 
    transparent: true, 
    }); 
    cyl = new THREE.Mesh(cylGeom, cylMat); 
    scene.add(cyl); 
} 

var cylWrap; 
function addTunnelWrap(){ 
    var cylGeom = new THREE.CylinderGeometry(510, 510, 500, 32, 32, true); 
    var cylMat = new THREE.MeshBasicMaterial({ 
    color: 0xFFFFFF, 
    side: THREE.BackSide, 
    transparent: true, 
    opacity:.6 
    }); 
    innerCyl = new THREE.Mesh(cylGeom, cylMat); 
    scene.add(innerCyl); 
}