Three.js - 一侧是透明材料，但显示背景，而不是内侧

Question

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

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

以上示例的Codepen：http://codepen.io/pyort/pen/egqbLY

但有一个问题：当我看到一张脸的正面时，我想展示这个几何体下面的东西，而不是背面。

我不确定如何用简单的语言解释，这里是视觉解释

我的目标是这种门户网站＆＃39;因此，当你从一侧看时，它似乎有深度，但从其他角度看，它看起来超薄。如何达到这样的效果？使用某种着色器？使用镜像技术？

感谢。

Answer 1

尝试这样的事情：

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

实时示例位于https://stemkoski.github.io/AR-Examples/