在内部几何体内部时,外部几何体的背面不可见(THREE.JS R76)

时间:2016-05-07 06:35:38

标签: three.js visibility

我有两个圆柱几何,隧道内有隧道。我有一个png纹理,透明度添加到隧道中,黑色包裹。我打算将tunnelWrap的透明度降低为alphaMap不透明度的解决方法。

当在内部隧道内时,tunnelWrap显示为透明。为什么是这样?我尝试过更大的半径,结果也是一样。

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 个答案:

答案 0 :(得分:0)

我认为你有背后和双打混合。

我做了一个小提琴http://jsfiddle.net/cg0aayw5/

也许这是不对的,很难解读这个问题。

小提琴使用颜色而不是纹理和不透明度的动画来显示不透明度对圆柱体内部的影响。

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