THREE.js 如何在 3d 房间模型中制作透明的前墙

Question

我想在three.js中制作一个3d房间。我希望摄像机视图前面的墙壁在我旋转房间时变得透明。

这是我需要的示例：http : //jsfiddle.net/tp2f2oo4/

似乎解决方案是将 THREE.BackSide 添加到材料中。

var material2 = new THREE.MeshPhongMaterial( {
    color: 0xffffff, 
    transparent: false,
    side: THREE.BackSide
} );

实际上，当一个房间充当单个 THREE.BoxGeometry 时，这非常有效，但在我的情况下，每个墙壁、天花板和地板都是单独的 THREE.BoxGeometry 对象。当在相机视图前面时，有什么方法可以隐藏它们或不渲染它们？

Answer 1

您想根据某些条件隐藏网格。这是使用onBeforeRender()和onAfterRender()方法的完美用例。

// callbacks
var onBeforeRender = function() {

    var v = new THREE.Vector3();

    return function onBeforeRender( renderer, scene, camera, geometry, material, group ) {

        // this is one way. adapt to your use case.
        if ( v.subVectors( camera.position, this.position ).dot( this.userData.normal ) < 0 ) {

            geometry.setDrawRange( 0, 0 ); // it is too late to set visible = false, so do this, instead

        }

    };

}();

var onAfterRender = function( renderer, scene, camera, geometry, material, group ) {

    geometry.setDrawRange( 0, Infinity );

};

// mesh
mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 0, 10 );
mesh.rotation.set( 0, 0, 0 );
scene.add( mesh );
mesh.userData.normal = new THREE.Vector3( 0, 0, - 1 );
mesh.onBeforeRender = onBeforeRender;
mesh.onAfterRender = onAfterRender;

小提琴：http : //jsfiddle.net/3qh815xa/

三.js r.114