https://github.com/shahramshakiba/hauntedhouse-p05

Primitive Objects ⁞|⁞ Enter the mysterious world of a haunted house, where each flickering light reveals the haunting stories of the restless spirits that reside there ⁞|⁞ ⚪Three.js
https://github.com/shahramshakiba/hauntedhouse-p05

haunted-house threejs

Last synced: 2 days ago
JSON representation

Primitive Objects ⁞|⁞ Enter the mysterious world of a haunted house, where each flickering light reveals the haunting stories of the restless spirits that reside there ⁞|⁞ ⚪Three.js

• Host: GitHub
• URL: https://github.com/shahramshakiba/hauntedhouse-p05
• Owner: ShahramShakiba
• Created: 2024-06-12T07:28:57.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-01T07:59:00.000Z (5 months ago)
• Last Synced: 2024-11-16T03:16:07.113Z (2 days ago)
• Topics: haunted-house, threejs
• Language: JavaScript
• Homepage: https://haunted-house-shahram.vercel.app/
• Size: 25.5 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#    _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_: 


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

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

03. _
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".
_

04. _
Download Textures from the `  Poly Haven  ` site
_

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

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

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

08. _
Utilizing the techniques of casting shadows and receiving `  Shadows  ` to enhance the realism of the environment.
_

09. _
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_  






https://github.com/ShahramShakiba/HauntedHouse-Threejs-p05/assets/110089830/50267558-c52f-42df-82da-76b0543ab1a5

  
 

***

 ##  Find me around the Web