Javascript Three.js-一面为透明材质，但显示背景，而非内侧

我希望在几何体的正面应用透明材质。这很简单：

var normal = new THREE.MeshNormalMaterial();
            normal.side = THREE.BackSide;
    var materials = [
                normal,
            new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
            ];

    for( var i = 0; i < geometry.faces.length; i++ ) {
                geometry.faces[ i ].materialIndex = 0;
            }
    //a 'hole' to look inside
            geometry.faces[ 0 ].materialIndex = 1;
            geometry.faces[ 1 ].materialIndex = 1;
            mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

var normal=new THREE.MeshNormalMaterial（）；
正常。侧面=三个。背面；
var材料=[
正常,，
新的3.MeshBasicMaterial（{transparent:true，opacity:0}）
];
对于（变量i=0；i

代码笔到上面的示例：

但这里有一个陷阱：当我观察一张脸的正面时，我想展示这个几何体下面是什么，而不是背面

我不知道如何用简单的语言来解释，这里是直观的解释

我的目标是这种“门户”的东西，所以当你从一边看，它似乎有深度，但从其他角度看，它看起来非常薄。如何达到这样的效果？使用某种着色器？使用镜像技术

---

谢谢。

试试这样：

// the inside of the hole
let geometry1   = new THREE.CubeGeometry(2,2,2);
let material1   = new THREE.MeshLambertMaterial({
    transparent : true,
    color: 0xff0000,
    side: THREE.BackSide
}); 

mesh1 = new THREE.Mesh( geometry1, material1 );
scene.add( mesh1 );

// the invisibility cloak (box with a hole)
let geometry0 = new THREE.BoxGeometry(2,2,2);
geometry0.faces.splice(4, 2); // make hole by removing top two triangles

let material0 = new THREE.MeshBasicMaterial({
    colorWrite: false
});

let mesh0 = new THREE.Mesh( geometry0, material0 );
mesh0.scale.set(1,1,1).multiplyScalar(1.01); // slightly larger than inside cube
scene.add(mesh0);   

---

现场示例位于

解决方案是使用

material.colorWrite=false

并确保首先渲染面，以便深度缓冲区将防止渲染后面的任何内容。这是非常棘手的，因为您已经实现了它。相反，用一架飞机和它后面的一些物体做实验。非常感谢你的评论@WestLangley！你用一架飞机做实验是什么意思？从单一几何体切换到多个平面？我不明白你的确切问题陈述是什么，所以我无法提供详细的建议。做一些简单的工作，这样你就可以了解正在发生的事情，然后在它的基础上再接再厉。