BackSide of outer geom not visible when inside inner geom (THREE.JS R76)

问题

I have two cylinderGeometries with the tunnel inside the tunnel wrap. I have a png texture with transparency added to the tunnel and a black color to the wrap. I intend to lower the transparency on the tunnelWrap as a alphaMap opacity workaround.

The tunnelWrap appears as transparent when inside the inner tunnel. Why is this? I have tried with much larger radiuses and it was the same result.

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

回答1:

I think you have the backside and doublesides mixed up.

I made a fiddle http://jsfiddle.net/cg0aayw5/

Perhaps this isn't right, it's difficult to decipher the question.

The fiddle uses a color instead of a texture and an animation of the opacity to show the effect of the opacity on the inside of the cylinder.

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

来源：https://stackoverflow.com/questions/37085334/backside-of-outer-geom-not-visible-when-inside-inner-geom-three-js-r76

标签

three.js

visibility