What is three-fenestra?

codedgar/three-fenestra — explained in plain English

Analysis updated 2026-05-18

★ 42TypeScriptAudience · developerComplexity · 3/5Setup · easy

Mindmap

mindmap
  root((three-fenestra))
    What it does
      Fake interior rooms
      Interior mapping shader
      Depth illusion
    Tech stack
      TypeScript
      Three.js
      React Three Fiber
      GLSL shaders
    Use cases
      Architectural visualization
      Building exteriors
      Day night lighting
    Features
      Curtains and blinds
      Dirty glass effects
      Physically based rendering
    Audience
      Web 3D developers
      Game developers

mindmap root((three-fenestra)) What it does Fake interior rooms Interior mapping shader Depth illusion Tech stack TypeScript Three.js React Three Fiber GLSL shaders Use cases Architectural visualization Building exteriors Day night lighting Features Curtains and blinds Dirty glass effects Physically based rendering Audience Web 3D developers Game developers

What do people build with it?

USE CASE 1

Add convincing furnished-room illusions behind windows in a 3D architectural visualization.

USE CASE 2

Add realistic curtains, blinds, and dirty glass effects to building exteriors in a game or scene.

USE CASE 3

Simulate day and night lighting changes behind windows without real interior geometry.

USE CASE 4

Drop interior mapping into an existing Three.js or React Three Fiber scene with minimal setup.

What is it built with?

TypeScriptThree.jsReact Three FiberGLSL

How does it compare?

	codedgar/three-fenestra	futureuniant/workshadow	javlonbek1233/-l-clat-culinaire
Stars	42	42	42
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	moderate	easy
Complexity	3/5	2/5	1/5
Audience	developer	general	vibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Project is pre-1.0 (version 0.2.0), so the API may still change.

No license information is provided in the explanation.

So what is it?

Three-Fenestra is a library for 3D web graphics that makes flat window surfaces in a scene look like they have real furnished rooms behind them, without actually modeling or lighting those rooms. The trick is a classic graphics technique from 2008 called interior mapping: by using a texture atlas of pre-rendered room images and a lightweight ray-march shader, the library creates a convincing illusion of depth and interior space purely through math, with almost no performance cost compared to modeling real rooms. The library extends a standard material type from Three.js, which is a popular JavaScript library for 3D graphics in the browser. This means you can drop it into any existing Three.js scene with minimal changes. It also works inside React Three Fiber, a React-based wrapper for Three.js. Beyond the basic interior illusion, the library adds a second layer on top of the window surface for curtains, blinds, window frames, and glass effects. This front layer supports physically-based rendering, which is a standard technique for making surfaces respond realistically to light. Curtains can glow slightly from light behind them. Glass can show dirt, fingerprint smudges, a frosted appearance, and a faint fresnel sheen at grazing angles that signals to the viewer that a pane of glass is present. The library ships with ready-made starter textures so you can see something render immediately without creating your own artwork. A live demo site is linked from the repository. Configuration options are numerous and documented in a reference table: you can control apparent room depth, how many rooms are in your atlas grid, how dirty the glass looks, how strongly curtains block or transmit interior light, and more. Day and night lighting modes are supported through adjustable uniforms you wire to your own time-of-day controller. The project is pre-1.0, currently at version 0.2.0. Installation is a single npm command, and the README walks through both vanilla Three.js and React Three Fiber usage with code examples.

Copy-paste prompts

Prompt 1

Show me how to add three-fenestra to an existing Three.js scene with a window mesh.

Prompt 2

Help me set up three-fenestra inside a React Three Fiber project with a starter texture.

Prompt 3

Explain how interior mapping fakes a room behind a window without real 3D geometry.

Prompt 4

Write code to adjust the curtain glow and glass dirt settings in three-fenestra.

Prompt 5

Help me wire up day and night lighting uniforms for this window material.

Frequently asked questions