Hugging Face's logo

Spaces:
openfree
/
drqxab
Running

App Files Community
openfree commited on
Commit
d069959
·
verified ·
1 Parent(s): fa8d333

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +144 -18
index.html CHANGED
@@ -1,19 +1,145 @@
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
+ <meta charset="utf-8">
5
+ <title>Procedural Terrain</title>
6
+ <style>
7
+ body { margin: 0; overflow: hidden; }
8
+ #controls {
9
+ position: fixed;
10
+ top: 20px;
11
+ left: 20px;
12
+ background: rgba(0,0,0,0.7);
13
+ padding: 20px;
14
+ border-radius: 10px;
15
+ color: white;
16
+ font-family: Arial, sans-serif;
17
+ }
18
+ .control-group {
19
+ margin: 10px 0;
20
+ }
21
+ label {
22
+ display: inline-block;
23
+ width: 120px;
24
+ }
25
+ input[type="range"] {
26
+ width: 200px;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div id="controls">
32
+ <div class="control-group">
33
+ <label>Height Scale:</label>
34
+ <input type="range" id="heightScale" min="0" max="100" value="20">
35
+ </div>
36
+ <div class="control-group">
37
+ <label>Water Level:</label>
38
+ <input type="range" id="waterLevel" min="0" max="50" value="10">
39
+ </div>
40
+ <div class="control-group">
41
+ <label>Roughness:</label>
42
+ <input type="range" id="roughness" min="0" max="10" value="3" step="0.1">
43
+ </div>
44
+ </div>
45
+
46
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
47
+ <script>
48
+ let scene, camera, renderer, terrain, water;
49
+ const size = 128;
50
+
51
+ function init() {
52
+ scene = new THREE.Scene();
53
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
54
+ renderer = new THREE.WebGLRenderer();
55
+ renderer.setSize(window.innerWidth, window.innerHeight);
56
+ document.body.appendChild(renderer.domElement);
57
+
58
+ // Add lighting
59
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
60
+ scene.add(ambientLight);
61
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
62
+ directionalLight.position.set(1, 1, 1);
63
+ scene.add(directionalLight);
64
+
65
+ camera.position.set(50, 50, 50);
66
+ camera.lookAt(0, 0, 0);
67
+
68
+ createTerrain();
69
+ createWater();
70
+ animate();
71
+ }
72
+
73
+ function createTerrain() {
74
+ const geometry = new THREE.PlaneGeometry(100, 100, size, size);
75
+ const material = new THREE.MeshPhongMaterial({
76
+ color: 0x808080,
77
+ wireframe: false,
78
+ flatShading: true
79
+ });
80
+
81
+ terrain = new THREE.Mesh(geometry, material);
82
+ terrain.rotation.x = -Math.PI / 2;
83
+ scene.add(terrain);
84
+
85
+ updateTerrain();
86
+ }
87
+
88
+ function createWater() {
89
+ const geometry = new THREE.PlaneGeometry(100, 100);
90
+ const material = new THREE.MeshPhongMaterial({
91
+ color: 0x0077ff,
92
+ transparent: true,
93
+ opacity: 0.6
94
+ });
95
+
96
+ water = new THREE.Mesh(geometry, material);
97
+ water.rotation.x = -Math.PI / 2;
98
+ scene.add(water);
99
+ }
100
+
101
+ function updateTerrain() {
102
+ const heightScale = document.getElementById('heightScale').value;
103
+ const roughness = document.getElementById('roughness').value;
104
+ const vertices = terrain.geometry.attributes.position.array;
105
+
106
+ for(let i = 0; i < vertices.length; i += 3) {
107
+ const x = i / 3 % (size + 1);
108
+ const y = Math.floor(i / 3 / (size + 1));
109
+ vertices[i + 2] = generateHeight(x, y) * heightScale / 20;
110
+ }
111
+
112
+ terrain.geometry.attributes.position.needsUpdate = true;
113
+ terrain.geometry.computeVertexNormals();
114
+ }
115
+
116
+ function generateHeight(x, y) {
117
+ const roughness = document.getElementById('roughness').value;
118
+ return (Math.sin(x/10 * roughness) + Math.sin(y/10 * roughness)) / 2;
119
+ }
120
+
121
+ function updateWater() {
122
+ const waterLevel = document.getElementById('waterLevel').value;
123
+ water.position.y = waterLevel / 5;
124
+ }
125
+
126
+ function animate() {
127
+ requestAnimationFrame(animate);
128
+ renderer.render(scene, camera);
129
+ updateWater();
130
+ }
131
+
132
+ // Event Listeners
133
+ window.addEventListener('resize', () => {
134
+ camera.aspect = window.innerWidth / window.innerHeight;
135
+ camera.updateProjectionMatrix();
136
+ renderer.setSize(window.innerWidth, window.innerHeight);
137
+ });
138
+
139
+ document.getElementById('heightScale').addEventListener('input', updateTerrain);
140
+ document.getElementById('roughness').addEventListener('input', updateTerrain);
141
+
142
+ init();
143
+ </script>
144
+ </body>
145
+ </html>