Hugging Face's logo

Spaces:
DK9
/
3d-viewer
Running

App Files Community
DK9 commited on
Commit
f94b64a
·
verified ·
1 Parent(s): 7e15628

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +316 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: 3d Viewer
3
- emoji: 🦀
4
- colorFrom: indigo
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: 3d-viewer
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,316 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>3D Creation Studio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
10
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
11
+ <style>
12
+ #scene-container {
13
+ width: 100%;
14
+ height: 100%;
15
+ position: absolute;
16
+ top: 0;
17
+ left: 0;
18
+ z-index: 0;
19
+ }
20
+
21
+ .sidebar-slide {
22
+ transition: transform 0.3s ease-in-out;
23
+ }
24
+
25
+ .tool-icon {
26
+ transition: all 0.2s ease;
27
+ }
28
+
29
+ .tool-icon:hover {
30
+ transform: scale(1.1);
31
+ filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
32
+ }
33
+
34
+ .scene-overlay {
35
+ pointer-events: none;
36
+ }
37
+
38
+ .grid-toggle.active {
39
+ background-color: #3b82f6;
40
+ color: white;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-900 text-gray-200 overflow-hidden">
45
+ <!-- Top Navigation Bar -->
46
+ <header class="bg-gray-800 bg-opacity-90 border-b border-gray-700 fixed top-0 left-0 right-0 z-50 h-14 flex items-center px-4 shadow-lg">
47
+ <div class="flex items-center space-x-2">
48
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
49
+ <i class="fas fa-cube text-white"></i>
50
+ </div>
51
+ <h1 class="text-xl font-bold text-blue-400">3D Creation Studio</h1>
52
+ </div>
53
+
54
+ <div class="ml-auto flex items-center space-x-4">
55
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-md text-sm flex items-center space-x-1">
56
+ <i class="fas fa-save"></i>
57
+ <span>Save</span>
58
+ </button>
59
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-md text-sm flex items-center space-x-1">
60
+ <i class="fas fa-share-alt"></i>
61
+ <span>Export</span>
62
+ </button>
63
+ <div class="w-px h-6 bg-gray-600"></div>
64
+ <button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
65
+ <i class="fas fa-user"></i>
66
+ </button>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- Right Sidebar -->
71
+ <aside class="fixed right-0 top-14 bottom-0 w-64 bg-gray-800 bg-opacity-90 border-l border-gray-700 z-40 flex flex-col shadow-xl">
72
+ <div class="p-4 border-b border-gray-700">
73
+ <h2 class="font-semibold text-lg flex items-center justify-between">
74
+ <span>Scene Properties</span>
75
+ <i class="fas fa-cog text-blue-400"></i>
76
+ </h2>
77
+ </div>
78
+
79
+ <div class="flex-1 overflow-y-auto p-4 space-y-6">
80
+ <!-- Object Properties -->
81
+ <div>
82
+ <h3 class="font-medium text-sm uppercase text-gray-400 mb-2">Selected Object</h3>
83
+ <div class="space-y-3">
84
+ <div class="flex justify-between items-center">
85
+ <span>Position</span>
86
+ <div class="flex space-x-2">
87
+ <input type="number" class="w-16 bg-gray-700 rounded px-2 py-1 text-sm" placeholder="X">
88
+ <input type="number" class="w-16 bg-gray-700 rounded px-2 py-1 text-sm" placeholder="Y">
89
+ <input type="number" class="w-16 bg-gray-700 rounded px-2 py-1 text-sm" placeholder="Z">
90
+ </div>
91
+ </div>
92
+ <div class="flex justify-between items-center">
93
+ <span>Rotation</span>
94
+ <div class="flex space-x-2">
95
+ <input type="number" class="w-16 bg-gray-700 rounded px-2 py-1 text-sm" placeholder="X">
96
+ <input type="number" class="w-16 bg-gray-700 rounded px-2 py-1 text-sm" placeholder="Y">
97
+ <input type="number" class="w-16 bg-gray-700 rounded px-2 py-1 text-sm" placeholder="Z">
98
+ </div>
99
+ </div>
100
+ <div class="flex justify-between items-center">
101
+ <span>Scale</span>
102
+ <div class="flex space-x-2">
103
+ <input type="number" class="w-16 bg-gray-700 rounded px-2 py-1 text-sm" value="1">
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Material Properties -->
110
+ <div>
111
+ <h3 class="font-medium text-sm uppercase text-gray-400 mb-2">Material</h3>
112
+ <div class="space-y-3">
113
+ <div class="flex justify-between items-center">
114
+ <span>Color</span>
115
+ <input type="color" class="w-8 h-8 bg-gray-700 rounded cursor-pointer" value="#3b82f6">
116
+ </div>
117
+ <div class="flex justify-between items-center">
118
+ <span>Metalness</span>
119
+ <input type="range" min="0" max="1" step="0.1" class="w-24" value="0">
120
+ </div>
121
+ <div class="flex justify-between items-center">
122
+ <span>Roughness</span>
123
+ <input type="range" min="0" max="1" step="0.1" class="w-24" value="1">
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Lighting -->
129
+ <div>
130
+ <h3 class="font-medium text-sm uppercase text-gray-400 mb-2">Lighting</h3>
131
+ <div class="space-y-2">
132
+ <div class="flex justify-between items-center">
133
+ <span>Intensity</span>
134
+ <input type="range" min="0" max="2" step="0.1" class="w-24" value="1">
135
+ </div>
136
+ <div class="flex justify-between items-center">
137
+ <span>Ambient Light</span>
138
+ <input type="range" min="0" max="1" step="0.1" class="w-24" value="0.2">
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </aside>
144
+
145
+ <!-- Tools Panel -->
146
+ <div class="fixed right-4 bottom-4 z-50 flex flex-col space-y-2">
147
+ <button id="grid-toggle" class="grid-toggle w-12 h-12 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center shadow-lg tool-icon">
148
+ <i class="fas fa-th"></i>
149
+ </button>
150
+ <button class="w-12 h-12 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center shadow-lg tool-icon">
151
+ <i class="fas fa-ruler-combined"></i>
152
+ </button>
153
+ <button class="w-12 h-12 bg-gray-700 hover:bg-gray-600 rounded-full flex items-center justify-center shadow-lg tool-icon">
154
+ <i class="fas fa-lightbulb"></i>
155
+ </button>
156
+ <button class="w-12 h-12 bg-blue-600 hover:bg-blue-500 rounded-full flex items-center justify-center shadow-lg tool-icon">
157
+ <i class="fas fa-question"></i>
158
+ </button>
159
+ </div>
160
+
161
+ <!-- Scene Container -->
162
+ <div id="scene-container"></div>
163
+
164
+ <!-- Scene Overlay -->
165
+ <div class="scene-overlay fixed top-14 left-0 right-64 bottom-0 flex items-center justify-center pointer-events-none">
166
+ <div class="absolute top-4 left-4 bg-gray-800 bg-opacity-70 px-3 py-1 rounded-md text-sm">
167
+ <span class="text-blue-400">Perspective</span> | <span>FPS: <span id="fps-counter">60</span></span>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Object Creation Menu -->
172
+ <div class="fixed left-4 top-20 bg-gray-800 bg-opacity-90 rounded-lg shadow-xl p-2 z-40">
173
+ <h3 class="text-sm font-medium mb-2 px-2">Create Object</h3>
174
+ <div class="grid grid-cols-3 gap-2">
175
+ <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded flex flex-col items-center tool-icon">
176
+ <i class="fas fa-cube mb-1"></i>
177
+ <span class="text-xs">Cube</span>
178
+ </button>
179
+ <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded flex flex-col items-center tool-icon">
180
+ <i class="fas fa-circle mb-1"></i>
181
+ <span class="text-xs">Sphere</span>
182
+ </button>
183
+ <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded flex flex-col items-center tool-icon">
184
+ <i class="fas fa-cylinder mb-1"></i>
185
+ <span class="text-xs">Cylinder</span>
186
+ </button>
187
+ <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded flex flex-col items-center tool-icon">
188
+ <i class="fas fa-cone mb-1"></i>
189
+ <span class="text-xs">Cone</span>
190
+ </button>
191
+ <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded flex flex-col items-center tool-icon">
192
+ <i class="fas fa-torus mb-1"></i>
193
+ <span class="text-xs">Torus</span>
194
+ </button>
195
+ <button class="p-2 bg-gray-700 hover:bg-gray-600 rounded flex flex-col items-center tool-icon">
196
+ <i class="fas fa-lightbulb mb-1"></i>
197
+ <span class="text-xs">Light</span>
198
+ </button>
199
+ </div>
200
+ </div>
201
+
202
+ <script>
203
+ // Initialize Three.js scene
204
+ let scene, camera, renderer, controls;
205
+
206
+ function initThreeJS() {
207
+ const container = document.getElementById('scene-container');
208
+
209
+ // Scene
210
+ scene = new THREE.Scene();
211
+ scene.background = new THREE.Color(0x1a1a1a);
212
+
213
+ // Camera
214
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
215
+ camera.position.set(5, 5, 5);
216
+
217
+ // Renderer
218
+ renderer = new THREE.WebGLRenderer({ antialias: true });
219
+ renderer.setSize(window.innerWidth, window.innerHeight);
220
+ renderer.shadowMap.enabled = true;
221
+ container.appendChild(renderer.domElement);
222
+
223
+ // Controls
224
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
225
+ controls.enableDamping = true;
226
+ controls.dampingFactor = 0.05;
227
+
228
+ // Lights
229
+ const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
230
+ scene.add(ambientLight);
231
+
232
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
233
+ directionalLight.position.set(5, 10, 7);
234
+ directionalLight.castShadow = true;
235
+ scene.add(directionalLight);
236
+
237
+ // Grid helper
238
+ const gridHelper = new THREE.GridHelper(20, 20, 0x555555, 0x333333);
239
+ scene.add(gridHelper);
240
+
241
+ // Axes helper
242
+ const axesHelper = new THREE.AxesHelper(5);
243
+ scene.add(axesHelper);
244
+
245
+ // Simple cube for demonstration
246
+ const geometry = new THREE.BoxGeometry();
247
+ const material = new THREE.MeshStandardMaterial({
248
+ color: 0x3b82f6,
249
+ metalness: 0.1,
250
+ roughness: 0.5
251
+ });
252
+ const cube = new THREE.Mesh(geometry, material);
253
+ cube.castShadow = true;
254
+ scene.add(cube);
255
+
256
+ // Plane
257
+ const planeGeometry = new THREE.PlaneGeometry(20, 20);
258
+ const planeMaterial = new THREE.MeshStandardMaterial({
259
+ color: 0x222222,
260
+ side: THREE.DoubleSide
261
+ });
262
+ const plane = new THREE.Mesh(planeGeometry, planeMaterial);
263
+ plane.rotation.x = -Math.PI / 2;
264
+ plane.receiveShadow = true;
265
+ scene.add(plane);
266
+
267
+ // Handle window resize
268
+ window.addEventListener('resize', () => {
269
+ camera.aspect = window.innerWidth / window.innerHeight;
270
+ camera.updateProjectionMatrix();
271
+ renderer.setSize(window.innerWidth, window.innerHeight);
272
+ });
273
+
274
+ // FPS counter
275
+ let lastTime = performance.now();
276
+ let frames = 0;
277
+
278
+ // Animation loop
279
+ function animate() {
280
+ requestAnimationFrame(animate);
281
+
282
+ controls.update();
283
+ renderer.render(scene, camera);
284
+
285
+ // Update FPS counter every second
286
+ frames++;
287
+ const now = performance.now();
288
+ if (now >= lastTime + 1000) {
289
+ document.getElementById('fps-counter').textContent = frames;
290
+ frames = 0;
291
+ lastTime = now;
292
+ }
293
+ }
294
+
295
+ animate();
296
+ }
297
+
298
+ // Initialize UI interactions
299
+ function initUI() {
300
+ // Grid toggle
301
+ document.getElementById('grid-toggle').addEventListener('click', function() {
302
+ this.classList.toggle('active');
303
+ // In a real app, you would toggle the grid helper visibility here
304
+ });
305
+
306
+ // Tooltips would be implemented here in a real app
307
+ }
308
+
309
+ // Initialize everything when DOM is loaded
310
+ document.addEventListener('DOMContentLoaded', () => {
311
+ initThreeJS();
312
+ initUI();
313
+ });
314
+ </script>
315
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DK9/3d-viewer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
316
+ </html>