Hugging Face's logo

Spaces:
awacke1
/
Thor.Odin.Baldur.Sleipnir.Myths
Running

App Files Community
awacke1 commited on
Commit
65c7cfb
·
1 Parent(s): ba6732e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -37
index.html CHANGED
@@ -2,44 +2,67 @@
2
  <html>
3
  <head>
4
  <meta charset="utf-8">
5
- <title>Three.js Example</title>
6
- <style>
7
- body {
8
- margin: 0;
9
- overflow: hidden;
10
- }
11
- </style>
12
  </head>
13
  <body>
14
- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
15
- <script>
16
- // Create a Three.js renderer
17
- var renderer = new THREE.WebGLRenderer();
18
- renderer.setSize(window.innerWidth, window.innerHeight);
19
- document.body.appendChild(renderer.domElement);
20
-
21
- // Create a Three.js scene
22
- var scene = new THREE.Scene();
23
-
24
- // Create a Three.js camera
25
- var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
26
- camera.position.z = 5;
27
-
28
- // Create a Three.js cube
29
- var geometry = new THREE.BoxGeometry(1, 1, 1);
30
- var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
31
- var cube = new THREE.Mesh(geometry, material);
32
- scene.add(cube);
33
-
34
- // Add rotation animation to the cube
35
- function animate() {
36
- requestAnimationFrame(animate);
37
- cube.rotation.x += 0.01;
38
- cube.rotation.y += 0.01;
39
- renderer.render(scene, camera);
40
- }
41
-
42
- animate();
43
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  </body>
45
  </html>
 
2
  <html>
3
  <head>
4
  <meta charset="utf-8">
5
+ <title>A-Frame and Three.js Example</title>
6
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
8
+ <script src="https://cdn.rawgit.com/mrdoob/three.js/r128/examples/js/loaders/MTLLoader.js"></script>
9
+ <script src="https://cdn.rawgit.com/mrdoob/three.js/r128/examples/js/loaders/OBJLoader.js"></script>
 
 
10
  </head>
11
  <body>
12
+ <a-scene>
13
+ <a-camera position="0 50 400"></a-camera>
14
+ <a-entity id="iceland"></a-entity>
15
+
16
+ <script>
17
+ var loader = new THREE.OBJLoader();
18
+ var mtlLoader = new THREE.MTLLoader();
19
+ mtlLoader.load('https://threejs.org/examples/models/obj/landscape/outdoor/', function(materials) {
20
+ materials.preload();
21
+ loader.setMaterials(materials);
22
+ loader.load('https://threejs.org/examples/models/obj/landscape/outdoor/', function(object) {
23
+ var voxelSize = 10;
24
+ var voxelGeometry = new THREE.BoxGeometry(voxelSize, voxelSize, voxelSize);
25
+ var voxelMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
26
+ var voxelCount = 0;
27
+ object.traverse(function(child) {
28
+ if (child instanceof THREE.Mesh) {
29
+ var mesh = new THREE.Mesh(voxelGeometry, voxelMaterial);
30
+ mesh.position.set(child.position.x, child.position.y, child.position.z);
31
+ mesh.scale.set(voxelSize, voxelSize, voxelSize);
32
+ mesh.castShadow = true;
33
+ mesh.receiveShadow = true;
34
+ mesh.userData['originalPosition'] = mesh.position.clone();
35
+ mesh.userData['originalRotation'] = mesh.rotation.clone();
36
+ mesh.userData['id'] = voxelCount++;
37
+ mesh.name = 'voxel';
38
+ document.querySelector('#iceland').object3D.add(mesh);
39
+ }
40
+ });
41
+
42
+ animate();
43
+ });
44
+ });
45
+
46
+ function animate() {
47
+ requestAnimationFrame(animate);
48
+
49
+ var delta = 0.01;
50
+ document.querySelectorAll('[name="voxel"]').forEach(function(voxel) {
51
+ voxel.rotation.x += delta;
52
+ voxel.rotation.y += delta;
53
+ voxel.rotation.z += delta;
54
+ });
55
+
56
+ document.querySelector('[camera]').setAttribute('wasd-controls', '');
57
+
58
+ document.querySelector('[camera]').setAttribute('look-controls', '');
59
+
60
+ document.querySelector('[camera]').setAttribute('fly-controls', '');
61
+
62
+ document.querySelector('[camera]').setAttribute('wasd-flying-controls', '');
63
+
64
+ }
65
+ </script>
66
+ </a-scene>
67
  </body>
68
  </html>