Hugging Face's logo

Spaces:
awacke1
/
HTML5-ThreeJS-3D
Running

App Files Community
awacke1 commited on
Commit
9f757ed
·
1 Parent(s): aad8791

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +82 -18
index.html CHANGED
@@ -1,19 +1,83 @@
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
+ <title>Three.js 3D Scene with Fractal Object</title>
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ overflow: hidden;
10
+ }
11
+ </style>
12
+ </head>
13
+ <body>
14
+ <script src="https://threejs.org/build/three.min.js"></script>
15
+ <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
16
+ <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
17
+ <script src="https://threejs.org/examples/js/curves/NURBSCurve.js"></script>
18
+ <script>
19
+ // Set up the scene
20
+ const scene = new THREE.Scene();
21
+
22
+ // Set up the camera
23
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
24
+ camera.position.z = 5;
25
+
26
+ // Set up the renderer
27
+ const renderer = new THREE.WebGLRenderer();
28
+ renderer.setSize(window.innerWidth, window.innerHeight);
29
+ document.body.appendChild(renderer.domElement);
30
+
31
+ // Set up the skybox
32
+ const loader = new THREE.CubeTextureLoader();
33
+ const texture = loader.load([
34
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
35
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg',
36
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
37
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
38
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
39
+ 'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg'
40
+ ]);
41
+ scene.background = texture;
42
+
43
+ // Set up the lighting
44
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
45
+ scene.add(ambientLight);
46
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
47
+ directionalLight.position.set(0, 1, 0);
48
+ scene.add(directionalLight);
49
+
50
+ // Set up the geometry
51
+ const lsystem = new LSystem();
52
+ lsystem.addRule('F', 'F+F-F-F+F');
53
+ lsystem.setAxiom('F+F+F+F');
54
+ lsystem.iterate(3);
55
+ const lines = lsystem.getLines();
56
+ const material = new THREE.LineBasicMaterial({ color: 0xffffff });
57
+ const geometry = new THREE.BufferGeometry().setFromPoints(lines);
58
+ const fractal = new THREE.LineSegments(geometry, material);
59
+ scene.add(fractal);
60
+
61
+ // Set up the controls
62
+ const controls = new THREE.OrbitControls(camera, renderer.domElement);
63
+
64
+ // Set up the animation
65
+ function animate() {
66
+ requestAnimationFrame(animate);
67
+
68
+ fractal.rotation.x += 0.01;
69
+ fractal.rotation.y += 0.01;
70
+
71
+ controls.update();
72
+ renderer.render(scene, camera);
73
+ }
74
+ animate();
75
+
76
+ // Set up the GUI
77
+ const gui = new dat.GUI();
78
+ gui.add(fractal.material, 'linewidth', 0.1, 10);
79
+ gui.add(fractal.material, 'opacity', 0.1, 1);
80
+ gui.add(fractal.material, 'transparent');
81
+ </script>
82
+ </body>
83
+ </html>