Haunted House: 3D Atmosphere & Creative Coding
Jose Armando Felix
Like this project
Posted Jan 15, 2026
An interactive WebGL experiment exploring lighting, fog, and texture mapping without external 3D models.
Likes
0
Views
0
This project was an exploration into immersive web experiences. The goal was to create a spooky, atmospheric scene not by importing complex 3D assets, but by manipulating raw geometry and lighting in the browser.
Procedural Geometry Only
The core constraint of this project was to use only 3D primitives (cubes, planes, cones) rather than importing pre-made
.glb or .obj models.The House: Constructed entirely from grouped BoxGeometries and ConeGeometries.
The Environment: I used procedural generation to scatter the "graves" (cubes) randomly around the house, ensuring a different layout on every reload while keeping the door accessible.
Under the Hood
Tech Stack: Three.js, Vite, JavaScript.
Lighting: Utilized PointLights for the "ghosts" and a dim AmbientLight to simulate moonlight.
Atmosphere: Implemented custom fog (
scene.fog) to blend the floor plane into the background color, creating a seamless "infinite" horizon.Textures: Applied UV mapping for the bricks and door to add realism to simple shapes.