CODEWITHSUNDEEP
three.js
Christian Kienle
Christian Kienle

Reputation: 753

Transparent light-blocking Objects

I want to render a room with a floor + roof that is open to one side. The room contains a point light and the "outside" it lit by an ambient light (the sun). There is one additional requirement: The user should be able to look inside the room to see whats going on. But I cannot simply remove the roof because then the room is fully lit by the ambient light.

I think my problem could be solved by having 3d objects that are transparent by still are blocking the light.

To give you an idea about my current scene, this is how it looks like:

Scene

The grey thing is the wall of my room. The black thing is the floor of the room. The green thing is the ground of the scene. The room contains a point light.

I am currently using two scenes (see Exclude Area from Directional/Ambient Lighting) because I wanted the inside of the room to be unaffected by the ambient light. But now my lights can only affect either the inside of my room (the point light) OR the outside (the ambient light) but not both.

A runnable sample of my scene can be found here:

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

Again: I think that my problem could be solved by having transparent objects that still block the light. If I had that I would simply have a 3d plane on top of my room (as the roof) and make it transparent... It would block the light that is inside of the (but still let it go outside if the room is open) and it would also block the ambient light (partially - if the room is open)...

Maybe there is also another solution that I am not seeing.

Upvotes: 1

Views: 1060

Answers (2)

PartialFlavor_55KP
PartialFlavor_55KP

Reputation: 157

I would assign a 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 or texture alpha mask.

It depends on the presentation versus the output format. Also it depends on the complexity of the final floorplan. If your process is simple it will run Sims Lite on a Raspberry Voxel.

Upvotes: 0

M -
M -

Reputation: 28502

Just use one scene instead of two, then enable shadows across the relevant meshes so a light doesn't cross from inside to outside. Once you're using only one scene, the steps to take in your demo are:

  1. Disable AmbientLight, and use DirectionalLight only, since AmbientLight illuminates everything indiscriminately, and that's not what you want.
  2. Place the directional light above your structure, so it shines from the top-down.
  3. Enable shadow-casting on the walls
  4. Add a ceiling mesh with the material's side set to side: THREE.BackSide. This will only render the back side of the Mesh, which means it won't be visible from above, but it will still cast shadows.
  const roomCeilMat = new MeshStandardMaterial({
    side: BackSide
  });
  const roomCeiling = new Mesh(roomFloorGeo, roomCeilMat);
  roomCeiling.position.set(0, 0, 1);
  roomCeiling.castShadow = true;
  scene1.add(roomCeiling);

See here for a working copy of your demo: https://codesandbox.io/s/stupefied-williams-qd7jmi?file=/src/index.js

enter image description here

Upvotes: 2

Related Questions