Javascript THREE.js生成背景中有其他对象的透明对象

Hy

我想在three.js中创建一个房间，我希望在旋转房间时，后面有对象的墙（从摄影机的pov）变得透明（.5不透明度）

要澄清一点：

想象你有一个房间。那个房间有墙。在那个房间里，你插入 家具摄像机看着房间，我想把墙都弄平 仅当从摄影机的pov中有其他对象时才透明 后面（这样你就可以看到房间里的墙了）。后面的墙 不透明度应为1。所以无论你在哪里移动相机（看 房间）你可以看到所有的元素（否则一些墙会 阻挡视图）

---

关于如何移动相机，您没有提供很多细节。但这很容易做到。所有网格都具有不透明度的材质特性

这是一个JSFIDLE-

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

var doneMoving = false;

我在轨道控件的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;
}

---

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

关于如何移动相机，您没有提供太多细节。但这很容易做到。所有网格都具有不透明度的材质特性

这是一个JSFIDLE-

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

var doneMoving = false;

我在轨道控件的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;
}

---

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

对不起，这不是我要找的。想象你有一个房间。那个房间有墙。你在那个房间里插家具。摄影机查看房间，我希望墙只有在摄影机的pov中有其他对象的情况下才是透明的（这样您可以看到房间中的墙）。背面的墙不透明度应为1。因此，无论你在哪里移动相机（并查看房间），你都可以看到所有的元素（否则一些墙会挡住视线）。你应该在询问时更清楚。将房间的墙设置为仅渲染背面。这是在材料中完成的。侧面：三，背面。这意味着你的相机只能在后面看到它们，而不能在前面看到。很抱歉，这是你从我的描述中理解的。背面很好，但不能100%解决我的问题。你可以对墙后面的所有物体进行光线投射，看看墙是否更近……对不起，这不是我要找的。想象你有一个房间。那个房间有墙。你在那个房间里插家具。摄影机查看房间，我希望墙只有在摄影机的pov中有其他对象的情况下才是透明的（这样您可以看到房间中的墙）。背面的墙不透明度应为1。因此，无论你在哪里移动相机（并查看房间），你都可以看到所有的元素（否则一些墙会挡住视线）。你应该在询问时更清楚。将房间的墙设置为仅渲染背面。这是在材料中完成的。侧面：三，背面。这意味着你的相机只能在后面看到它们，而不能在前面看到。很抱歉，这是你从我的描述中理解的。3.背面很好，但不能100%解决我的问题。你可以对墙后的所有物体进行某种光线投射，看看墙是否更近……这就是你想要的：？是和否。这非常令人满意，但我最终需要知道一个物体后面是否有另一个物体，这样我才能使它透明。正如你在图片中看到的，墙的顶部不是透明的，我也希望它是透明的。这就是你想要的：？是和否。这非常令人满意，但我最终需要知道一个物体后面是否有另一个物体，这样我才能使它透明。正如您在图像中看到的，墙的顶部不是透明的，我也希望它是透明的。