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

Question

我想在 Three.js 中制作一个 3D 房间。我希望当我旋转房间时，相机 View 前面的墙壁变得透明。

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

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

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

事实上，当一个房间充当单个 THREE.BoxGeometry 时，这非常有效，但就我而言，每面墙、天花板和地板都是独立的 THREE.BoxGeometry 对象。当它们位于相机 View 前面时，有什么方法可以隐藏它们或不渲染它们吗？

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;

fiddle :http://jsfiddle.net/3qh815xa/

三.js r.114