Spaces:

awacke1
/

Thor.Odin.Baldur.Sleipnir.Myths

Running

App Files Files Community

awacke1 commited on Mar 19, 2023

Commit

b7cccf7

1 Parent(s): 61c8c09

Update index.html

Browse files

Files changed (1) hide show

index.html +90 -108

index.html CHANGED Viewed

@@ -1,123 +1,105 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8">
-    <title>A-Frame and Three.js Example</title>
-    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.rawgit.com/mrdoob/three.js/r128/examples/js/loaders/MTLLoader.js"></script>
-    <script src="https://cdn.rawgit.com/mrdoob/three.js/r128/examples/js/loaders/OBJLoader.js"></script>
-    <script src="https://unpkg.com/@aframe/physics-system/dist/aframe-physics-system.min.js"></script>
-    <script src="https://unpkg.com/@aframe/physics-debugger/dist/aframe-physics-debugger.min.js"></script>
 </head>
 <body>
-    <a-scene physics="debug: true;">
-        <a-assets>
-            <img id="sky" src="https://i.imgur.com/1RGMGKj.jpg">
-        </a-assets>
-        <a-entity id="player" position="0 10 0" camera look-controls kinematic-body></a-entity>
-        <a-entity id="iceland" static-body environment="preset:forest;groundYScale:10;groundTexture:https://i.imgur.com/HeYwiie.jpg"></a-entity>
-        <script>
-            var loader = new THREE.OBJLoader();
-            var mtlLoader = new THREE.MTLLoader();
-            mtlLoader.load('https://threejs.org/examples/models/obj/landscape/outdoor/', function(materials) {
-                materials.preload();
-                loader.setMaterials(materials);
-                loader.load('https://threejs.org/examples/models/obj/landscape/outdoor/', function(object) {
-                    var voxelSize = 10;
-                    var voxelGeometry = new THREE.BoxGeometry(voxelSize, voxelSize, voxelSize);
-                    var voxelMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
-                    var voxelCount = 0;
-                    object.traverse(function(child) {
-                        if (child instanceof THREE.Mesh) {
-                            var mesh = new THREE.Mesh(voxelGeometry, voxelMaterial);
-                            mesh.position.set(child.position.x, child.position.y, child.position.z);
-                            mesh.scale.set(voxelSize, voxelSize, voxelSize);
-                            mesh.castShadow = true;
-                            mesh.receiveShadow = true;
-                            mesh.userData['originalPosition'] = mesh.position.clone();
-                            mesh.userData['originalRotation'] = mesh.rotation.clone();
-                            mesh.userData['id'] = voxelCount++;
-                            mesh.name = 'voxel';
-                            document.querySelector('#iceland').object3D.add(mesh);
-                        }
-                    });
-                    animate();
-                });
-            });
-            function animate() {
-                requestAnimationFrame(animate);
-                var delta = 0.01;
-                document.querySelectorAll('[name="voxel"]').forEach(function(voxel) {
-                    voxel.rotation.x += delta;
-                    voxel.rotation.y += delta;
-                    voxel.rotation.z += delta;
-                });
-                var player = document.querySelector('#player');
-                var position = player.getAttribute('position');
-                if (position.y < -100) {
-                    player.setAttribute('position', '0 10 0');
-                    player.setAttribute('velocity', '0 0 0');
-                    player.setAttribute('rotation', '0 0 0');
-                }
-                var camera = player.querySelector('a-camera');
-               var camPosition = camera.getAttribute('position');
-            var camRotation = camera.getAttribute('rotation');
-            var forward = new THREE.Vector3(0, 0, -1);
-            var right = new THREE.Vector3(1, 0, 0);
-            var up = new THREE.Vector3(0, 1, 0);
-            forward.applyQuaternion(camera.object3D.quaternion);
-            right.applyQuaternion(camera.object3D.quaternion);
-            up.applyQuaternion(camera.object3D.quaternion);
-            var speed = 5;
-            var velocity = new THREE.Vector3(0, 0, 0);
-            if (keys.KeyW) {
-                velocity.add(forward.clone().multiplyScalar(speed));
-            }
-            if (keys.KeyS) {
-                velocity.sub(forward.clone().multiplyScalar(speed));
-            }
-            if (keys.KeyD) {
-                velocity.add(right.clone().multiplyScalar(speed));
-            }
-            if (keys.KeyA) {
-                velocity.sub(right.clone().multiplyScalar(speed));
-            }
-            if (keys.Space) {
-                velocity.add(up.clone().multiplyScalar(speed));
-            }
-            if (keys.ShiftLeft) {
-                velocity.sub(up.clone().multiplyScalar(speed));
-            }
-            player.setAttribute('velocity', velocity);
-            document.querySelector('[camera]').setAttribute('wasd-controls', '');
-            document.querySelector('[camera]').setAttribute('look-controls', '');
-            document.querySelector('[camera]').setAttribute('kinematic-body', '');
-            document.querySelector('[camera]').setAttribute('wasd-flying-controls', '');
-        }
-        function onKeyDown(event) {
-            keys[event.code] = true;
-        }
-        function onKeyUp(event) {
-            keys[event.code] = false;
-        }
-        document.addEventListener('keydown', onKeyDown);
-        document.addEventListener('keyup', onKeyUp);
-        var keys = {};
-    </script>
-</a-scene>
-</body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
+  <title>Minnesota Map</title>
+  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+  <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
+  <script src="https://unpkg.com/@aframe/physics-system"></script>
+  <style>
+    #canvas {
+      height: 500px;
+      width: 800px;
+    }
+    .button {
+      background-color: #222;
+      border: none;
+      color: white;
+      font-size: 16px;
+      padding: 10px 16px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      margin: 4px 2px;
+      cursor: pointer;
+    }
+    .link {
+      color: #8CEEEF;
+    }
+  </style>
 </head>
 <body>
+  <a-scene physics="debug: true;">
+    <a-entity environment="preset: forest"></a-entity>
+    <!-- Define the polygons for Minnesota -->
+    <a-entity position="0 0 -5">
+      <a-entity position="-2.5 0 0">
+        <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1" static-body></a-polygon>
+        <a-polygon fill="#2D6C4E" vertices="0.5 1, 1 0, 1 1" static-body></a-polygon>
+        <a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1" static-body></a-polygon>
+        <a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 0.5 1" static-body></a-polygon>
+      </a-entity>
+      <a-entity position="2.5 0 0">
+        <a-polygon fill="#2D6C4E" vertices="0 0, 1 0, 0.5 1" static-body></a-polygon>
+        <a-polygon fill="#2D6C4E" vertices="0 0, 0 1, 0.5 1" static-body></a-polygon>
+        <a-polygon fill="#2D6C4E" vertices="0.5 0, 1 0, 1 1" static-body></a-polygon>
+        <a-polygon fill="#2D6C4E" vertices="0.5 0, 0.5 1, 1 1" static-body></a-polygon>
+      </a-entity>
+    </a-entity>
+    <!-- Define the camera and buttons -->
+    <a-entity id="player" position="0 50 0" kinematic-body>
+      <a-entity id="camera" camera look-controls kinematic-body></a-entity>
+      <a-entity id="zoomIn" class="button" position="-2.5 0 0" rotation="0 0 180" onclick="zoomIn()">+</a-entity>
+      <a-entity id="zoomOut" class="button" position="2.5 0 0" onclick="zoomOut()">-</a-entity>
+    </a-entity>
+<!-- Define the script to update the video texture -->
+<script>
+  const video = document.querySelector('#video');
+  const canvas = document.querySelector('#videoTextureCanvas');
+  const ctx = canvas.getContext('2d');
+  function updateVideoTexture() {
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const texture = document.querySelector('#videoTexture');
+    texture.needsUpdate = true;
+  }
+  video.addEventListener('play', function() {
+    setInterval(updateVideoTexture, 16);
+  });
+</script>
+<script>
+  // Get the camera entity
+  const player = document.querySelector('#player');
+  const camera = document.querySelector('#camera');
+  // Define the zoom in and zoom out functions
+  function zoomIn() {
+    camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y - 5, z: camera.getAttribute('position').z});
+  }
+  function zoomOut() {
+    camera.setAttribute('position', {x: camera.getAttribute('position').x, y: camera.getAttribute('position').y + 5, z: camera.getAttribute('position').z});
+  }
+  // Define the gravity and physics for the player
+  player.addEventListener('componentinitialized', function (evt) {
+    if (evt.detail.name !== 'kinematic-body') { return; }
+    const physics = player.getAttribute('physics');
+    physics.debug = false;
+    physics.driver = 'physics';
+    physics.debug = true;
+    physics.debugInterval = 500;
+    physics.debugTiming = 'interval';
+    player.setAttribute('physics', physics);
+    player.body.linearDamping = 0.9;
+    player.body.angularDamping = 0.9;
+    player.body.gravity.y = -30;
+    player.body.mass = 80;
+  });
+</script>