Haunted House  

  Description

To begin with, it is important to note that, this project have been sourced from an exceptional Three.js Journey Course.

👤 Instructed by a proficient and expert educator, "Bruno Simon" .

Hey everyone
I'm going to build a simple house that has a spooky vibe
Picture it as a Haunted House with "walls", a "roof", a "door", and some "bushes".

I'll even add "graves" in the garden.
Also instead of traditional "ghost decorations", I will use "Multicolor Lights" that float around and pass through the walls and floor.

Get ready for a spooky and exciting take on a traditional haunted house theme!

Feel free to delve into the code as it has been written in a straightforward manner for easy understanding.

Important

It is crucial to grasp that the project can be used in:

• The "Gaming" industry could find value in this project for creating immersive and atmospheric game environments.
• The "Entertainment" industry, including theme parks or virtual reality experiences, could also benefit from the realistic and spooky atmosphere you have created.
• The "Education" industry, it can be used as an educational tool to teach students about 3D modeling, animation, and programming. It can also be used to create engaging and interactive storytelling experiences for children.
• Additionally, "Architectural firms" might find inspiration in your 3D design skills for creating unique and engaging building models.

Which Concepts Have I Covered:

1. I've used a MeshStandardMaterial for a realistic appearance. The textures will be PBR textures ("Physically Based Rendering") and are compitable with MeshStandardMaterial.

2. I established a "Group" for both the "House" and "Graves" to facilitate potential relocation or resizing of the entire structures.

3. To create the elements of a 3D scene, utilize BoxGeometry for the "walls" and "graves", ConeGeometry for the "roof", PlaneGeometry for the "ground" and "door", and SphereGeometry for the "bushes".

4. Download Textures from the Poly Haven site

5. Begin by applying the texture to the "Floor", followed by the "Walls", "Roof", "Bushes", "Graves", and "Door".

6. Adjusting the lighting settings to replicate the ambiance of moonlight and installing a separate light for the door.

7. Utilizing PointLight to create Ghostly effects that pass through walls and floors, then animating these elements to evoke a spooky atmosphere.

8. Utilizing the techniques of casting shadows and receiving Shadows to enhance the realism of the environment.

9. Utilizing WebGL shaders from the Three.js library to enhance environmental realism through Sky rendering.

10. Generate Fog effects using the FogExp2 function and manipulate the density parameter to enhance the realism of the environment.

11. Enhancing Texture Optimization through the utilization of Cloud-Convert's online platform for converting .jpg files to .webp format.

Give it a go in real-time and give me a Star     Haunted House

HauntedHouse-GitHub.mp4

---

Find me around the Web