透明遮光物

Question

我想渲染一个房间，其地板和屋顶向一侧开放。房间包含一个点光源和由环境光（太阳）照亮的“外部”。还有一个额外的要求：用户应该能够看到房间里面发生了什么。但我不能简单地拆除屋顶，因为这样房间就会被环境光完全照亮。

我认为我的问题可以通过让透明的 3d 对象仍然阻挡光线来解决。

为了让您了解我当前的场景，它是这样的：

灰色的东西是我房间的墙壁。黑色的东西是房间的地板。绿色的东西是场景的地面。房间里有一个点光源。

我目前正在使用两个场景（参见），因为我希望房间内部不受环境光的影响。但现在我的灯光只能影响房间内部（点光源）或外部（环境光），但不能同时影响两者。

可以在此处找到我的场景的可运行示例：

https://codesandbox.io/s/confident-worker-64kg7m?file=/src/index.js

再说一次：我认为我的问题可以通过使用仍然阻挡光线的透明物体来解决。如果我有，我会在我的房间顶部（作为屋顶）简单地有一个 3d 平面并使其透明......它会阻挡内部的光线（但如果房间是开放的，仍然让它出去) 并且它还会阻挡环境光（部分 - 如果房间是开放的）...

也许还有另一种我没有看到的解决方案。

Answer 1

只需使用一个场景而不是两个场景，然后在相关网格上启用阴影，这样光线就不会从内到外穿过。一旦你只使用一个场景，在你的演示中采取的步骤是：

禁用 AmbientLight，并仅使用 DirectionalLight，因为 AmbientLight 会不分青红皂白地照亮一切，而这不是您想要的。
将定向光放在结构上方，使其从 top-down 发光。
在墙上启用 shadow-casting
添加天花板网格，material 的一侧设置为 side: THREE.BackSide。这只会渲染网格的背面，这意味着从上方看不到它，但它仍然会投射阴影。

  const roomCeilMat = new MeshStandardMaterial({
    side: BackSide
  });
  const roomCeiling = new Mesh(roomFloorGeo, roomCeilMat);
  roomCeiling.position.set(0, 0, 1);
  roomCeiling.castShadow = true;
  scene1.add(roomCeiling);

请在此处查看演示的工作副本： https://codesandbox.io/s/stupefied-williams-qd7jmi?file=/src/index.js

Answer 2

我会指定一个 flat, emissive material to the room. Or a depth gradient if it becomes terrain. Since ambient light doesn't cast shadow. It saves a light and extra geometry or groups. Plus web model viewer(s) would probably render it better. If you're doing a reveal transition, use a clip plane 或纹理 alpha 蒙版。

这取决于演示文稿与输出格式。它还取决于最终平面图的复杂性。如果您的过程很简单，它将运行 Sims Lite on a Raspberry Voxel。

透明遮光物

Transparent light-blocking Objects

three.js