THREE.js使透明对象在背景中具有其他对象

Question

HY，

我想在three.js中建一个房间，我希望在旋转房间时，墙后面有物体（从相机的pov）变成透明（.5不透明度）。

澄清一下：

  

想象一下你有一个房间。那个房间有墙。在那个房间你插入   家具。相机看着房间，我想要的墙壁   透明只有从相机的pov他们有其他物体   在后面（所以你可以看到扔墙的房间）。背后的墙壁   应该有不透明度1.所以你移动相机的任何地方（并看看   房间）你可以看到所有的元素（否则一些墙会   阻止视图）   

Answer 1

关于如何移动相机，您没有提供很多细节。但它可以很容易地完成。所有网格物体都具有不透明度的材质属性。

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

我在里面添加了整个OrbitControls.js并添加了一个布尔值;

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

就是这样。这应该给你足够的想法如何实现这一点。