Three.js Journey

This was a guided project from Three.js Journey course, thanks Bruno Simon for the amazing content.

Live Demo

Check out the deployed version of the project: Haunted House Three.js

Project Structure

.vite/
    deps_temp_0aa4c961/
        package.json
package.json
readme.md
src/
    index.html
    script.js
    style.css
static/
    .gitkeep
    bush/
        .DS_Store
        leaves_forest_ground_1k/
            .DS_Store
    door/
        .DS_Store
    floor/
        .DS_Store
        coast_sand_rocks_02_1k/
            .DS_Store
    grave/
        .DS_Store
        plastered_stone_wall_1k/
            .DS_Store
    models/
        tree4.glb
    roof/
        .DS_Store
        roof_slates_02_1k/
            .DS_Store
    wall/
        .DS_Store
        castle_brick_broken_06_1k/
            .DS_Store
vite.config.js

Setup

Download Node.js.

Run the following commands:

# Install dependencies (only the first time)
npm install

# Run the local server at localhost:5137
npm run dev

# Build for production in the dist/ directory
npm run build

Project Details

Sky

The sky is created using the Sky class and added to the scene with specific material uniforms for turbidity, rayleigh, mieCoefficient, mieDirectionalG, and sunPosition.

Fog

Fog is added to the scene using THREE.FogExp2 with a specific color and density.

Animation

The animation loop updates the positions of three ghost objects and the controls, and renders the scene using the renderer.

Configuration

The project uses Vite for development and build processes. The configuration is defined in vite.config.js.

Dependencies

• three: ^0.166.1
• lil-gui: ^0.19.2
• vite: ^5.3.3
• vite-plugin-restart: ^0.4.1