forked from pgaonamu/IKEA_3D
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.txt
89 lines (69 loc) · 2.51 KB
/
README.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
IKEA 3D Viewer
This project is a 3D scene renderer built using three.js, a cozy living room where the user will be capable of planning his environment.
Features
3D Object Manipulation:
Move, rotate, scale, and reset objects within the scene. Object selection is highlighted for easy identification.
HDR Lighting Toggle:
Switch between day and night environments using High Dynamic Range (HDR) textures.
Audio Integration:
Background jazz music plays when the user interacts with the canvas.
Screenshot Functionality:
Capture and save the current scene view as a .png image.
Interactive Help Overlay:
Display keyboard controls and usage instructions with a help menu.
Installation
Clone the repository:
git clone https://github.com/pgaonamu/IKEA_3D.git
Navigate to the project folder:
cd yourproject
Install dependencies:
npm install
Run the development server:
npm run dev
Open your browser and navigate to:
http://localhost:3000 (or the one shown in your terminal)
Controls
Key Action
W Move the selected object forward
A Move the selected object left
S Move the selected object backward
D Move the selected object right
← (Left Arrow) Rotate the selected object left
→ (Right Arrow) Rotate the selected object right
Q Shrink the selected object
E Extend the selected object
R Reset all objects to their initial state
H Toggle the help menu
Mouse
Left Click: Select objects in the scene.
Buttons
☀️ / 🌙: Toggle between day and night lighting.
📸: Capture and save a screenshot of the scene.
Project Structure
src/
├── audio.ts # Audio setup
├── core.ts # Scene, camera, renderer, and controls setup
├── illumination.ts # Setup for lighting
├── main.ts # Entry point for the app, and more.
Dependencies
three.js — JavaScript library for 3D rendering.
Vite — Development server and build tool.
Additional three.js utilities:
GLTFLoader for loading 3D models.
RGBELoader for HDR environment textures.
OrbitControls for interactive camera controls.
Development
Prerequisites
Node.js (v14 or newer)
A modern web browser (e.g., Chrome or Firefox)
Scripts
On your root project folder:
Run locally: npm run dev
Build for production: npm run build
Preview production build: npm run preview
NOTE:
Ensure the browser supports WebGL; older devices may not display the scene.
Once you run npm run dev, you can access http://localhost:5178/ (or your respective port) via browser.
Acknowledgments
three.js Documentation: https://threejs.org/docs/
IKEA brand for inspiring the 3D models.