Hugging Face's logo

Spaces:
awacke1
/
HTML5-ThreeJS
Running

App Files Community
2
awacke1 commited on
Commit
09c7acd
·
1 Parent(s): c29f49d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +48 -16
index.html CHANGED
@@ -1,19 +1,51 @@
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>
3
+ <head>
4
+ <title>Three.js Scene and Animation Example</title>
5
+ <style>
6
+ body {
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+ canvas {
11
+ display: block;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <script src="https://threejs.org/build/three.min.js"></script>
17
+ <script>
18
+ // Set up the scene, camera, and renderer
19
+ const scene = new THREE.Scene();
20
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
21
+ const renderer = new THREE.WebGLRenderer();
22
+ renderer.setSize(window.innerWidth, window.innerHeight);
23
+ document.body.appendChild(renderer.domElement);
24
+
25
+ // Create a cube geometry and material
26
+ const geometry = new THREE.BoxGeometry();
27
+ const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
28
+
29
+ // Create a cube mesh and add it to the scene
30
+ const cube = new THREE.Mesh(geometry, material);
31
+ scene.add(cube);
32
+
33
+ // Set up animation loop
34
+ const animate = function () {
35
+ requestAnimationFrame(animate);
36
+
37
+ // Rotate the cube
38
+ cube.rotation.x += 0.01;
39
+ cube.rotation.y += 0.01;
40
+
41
+ renderer.render(scene, camera);
42
+ };
43
+
44
+ // Start the animation loop
45
+ animate();
46
+
47
+ // Adjust camera position
48
+ camera.position.z = 5;
49
+ </script>
50
+ </body>
51
  </html>