THREE.js 制作在背景中有其他对象的透明对象答案

【问题标题】：THREE.js make transparent objects that have other objects in backgroundTHREE.js 制作在背景中有其他对象的透明对象
【发布时间】：2017-09-15 18:05:14
【问题描述】：

喂，

我想在 three.js 中创建一个房间，并且我希望在我旋转房间时，墙壁后面有物体（来自相机的 pov）变得透明（0.5 不透明度）。

澄清一点：

假设你有一个房间。那个房间有墙壁。在那个房间里你插入家具。相机看着房间，我想要墙壁仅当从相机的视角看它们有其他物体时才透明后面（所以你可以看到房间的墙壁）。后面的墙壁应该有不透明度 1. 所以你移动相机的任何地方（看看房间）你可以看到所有的元素（否则一些墙壁会挡住视线）

【问题讨论】：

这是您要查找的内容：jsfiddle.net/tp2f2oo4?
是和不是。这非常令人满意，但我最终需要知道一个对象背后是否有另一个对象，这样我才能使它透明。正如你在图片中看到的，墙的顶部不是透明的，我也想要那个透明的。

标签： javascript three.js

【解决方案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;
}

就是这样。这应该让您对如何实现这一点有了足够的了解。

【讨论】：

抱歉，这不是我想要的。想象你有一个房间。那个房间有墙壁。在那个房间里，你插入家具。相机看着房间，我希望墙壁是透明的，只有当从相机的视角看它们后面有其他物体时（这样你就可以看到房间的墙壁）。后面的墙壁应该不透明度为 1。因此，无论您移动相机（并查看房间），您都可以看到所有元素（否则某些墙壁会挡住视线）。
那你问的时候应该更清楚。您将房间的墙壁设置为仅渲染 BACKSIDE 表面。这是在材料中完成的。侧面：三.BackSide。这意味着您的相机只会在其后方而非前方时看到它们。
很抱歉，这是您从我所描述的内容中所理解的。 THREE.BackSide 非常好，但不能 100% 解决我的问题。
你可以对所有可能在墙后的物体进行某种光线投射，看看墙是否更近...