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

问题描述

限时删除！！

我有两个圆柱几何体，隧道包裹在隧道内.我有一个 png 纹理，在隧道中添加了透明度，在包裹上添加了黑色.我打算降低 tunnelWrap 的透明度作为 alphaMap 不透明度的解决方法.

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.

tunnelWrap 在内部隧道中显示为透明.为什么是这样?我尝试过更大的半径，结果是一样的.

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

推荐答案

我认为你把背面和双面混淆了.

I think you have the backside and doublesides mixed up.

我做了一个小提琴 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);
}

这篇关于在内部几何体内部时，外部几何体的背面不可见(THREE.JS R76)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..