javascript - THREE.js 制作背景中有其他对象的透明对象

Question

嘿，

我想在 Three.js 中创建一个房间，并且希望当我旋转房间时，后面有物体的墙壁(从相机的视角)变得透明(0.5 不透明度)。

澄清一点:

Imagine you have a room. That room has walls. In that room you insert furniture. Camera looks at the room and I want the walls to be transparent only if from the pov of the camera they have other objects behind (so you can see throw walls the room). The walls in the back should have opacity 1. So anywhere you move the camera (and look at the room) you can see all the elements (otherwise some walls will block the view)

Answer 1

您没有提供有关如何移动相机的大量细节。但这可以相当容易地完成。所有网格体都具有不透明度的 Material 属性。

这是一个 jsFiddle - http://jsfiddle.net/Komsomol/xu2mjwdk/

我在里面添加了整个 OrbitControls.js 并添加了一个 bool 值；

var doneMoving = false;

我将其添加到 OrbitControls 的 mouseup 和 mousedown 中。只是为了在我们不移动相机时进行捕捉。

需要在渲染器和对象中添加一些特定选项。

renderer = new THREE.WebGLRenderer({
    alpha:true,
    transparent: true
});

对象

torusMat = new THREE.MeshPhongMaterial();
torusMat.needsUpdate = true;
torusMat.transparent = true;

最后在 Animate 方法中添加一些控制代码以启动您想要的任何更改。

if(doneMoving){
   torusMat.opacity = 0.5;
} else {
    torusMat.opacity = 1;
}

就是这样。这应该能让您充分了解如何实现这一点。