Spaces:

awacke1
/

NVidia.Raytrace.Mirror.HTML5.ThreeJS

Running

App Files Files Community

awacke1 commited on Mar 19, 2023

Commit

236dd8c

1 Parent(s): 71832f9

Update index.html

Browse files

Files changed (1) hide show

index.html +97 -86

index.html CHANGED Viewed

@@ -1,97 +1,108 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <title>Iceland Landscape</title>
-        <style>
-            body {
-                margin: 0;
-                overflow: hidden;
-            }
-            canvas {
-                width: 100%;
-                height: 100%;
-            }
-        </style>
-    </head>
-    <body>
-        <canvas id="myCanvas"></canvas>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/controls/OrbitControls.js"></script>
-        <script>
-            // Load Iceland topography data
-            var loader = new THREE.TerrainLoader();
-            loader.load('iceland-heightmap.png', function(terrainData) {            // Initialize the scene, camera, and renderer
-            var scene = new THREE.Scene();
-            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            var renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            document.body.appendChild(renderer.domElement);
-            // Create landscape mesh
-            var geometry = new THREE.PlaneGeometry(100, 100, terrainData.width - 1, terrainData.height - 1);
-            geometry.rotateX(-Math.PI / 2);
-            for (var i = 0, l = geometry.vertices.length; i < l; i++) {
-                geometry.vertices[i].z = terrainData.heightmap[i] / 100;
-            }
-            // Create fractal seashore and island
-            var shoreGeometry = new THREE.ShapeGeometry(new THREE.Shape([
-                new THREE.Vector2(-50, -50),
-                new THREE.Vector2(-50, 50),
-                new THREE.Vector2(50, 50),
-                new THREE.Vector2(50, -50)
-            ]));
-            var islandGeometry = new THREE.ShapeGeometry(new THREE.Shape([
-                new THREE.Vector2(-25, -25),
-                new THREE.Vector2(-25, 25),
-                new THREE.Vector2(25, 25),
-                new THREE.Vector2(25, -25)
-            ]));
-            for (var i = 0; i < 3; i++) {
-                var fractalShore = new THREE.Mesh(shoreGeometry, material);
-                fractalShore.position.set(0, i * 0.02, 0);
-                fractalShore.scale.multiplyScalar(1.2 - i * 0.2);
-                fractalShore.updateMatrix();
-                shoreGeometry.merge(fractalShore.geometry, fractalShore.matrix);
-                var fractalIsland = new THREE.Mesh(islandGeometry, material);
-                fractalIsland.position.set(0, i * 0.02 + 0.05, 0);
-                fractalIsland.scale.multiplyScalar(1.2 - i * 0.2);
-                fractalIsland.updateMatrix();
-                islandGeometry.merge(fractalIsland.geometry, fractalIsland.matrix);
-            }
-            // Create material for the landscape
-            var material = new THREE.MeshStandardMaterial({
-                color: 0xaaaaaa,
-                metalness: 0.1,
-                roughness: 0.7
-            });
-            // Combine landscape and fractal seashore and island meshes
-            var landscape = new THREE.Mesh(geometry, material);
-            landscape.geometry.merge(islandGeometry);
-            scene.add(landscape);
-            // Add point light to scene
-            var light = new THREE.PointLight(0xffffff, 1, 100);
-            light.position.set(0, 10, 0);
-            scene.add(light);
-            // Set camera position
-            camera.position.set(0, 10, 20);
-            // Add orbit controls for camera
-            var controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.target.set(0, 10, 0);
-            controls.update();
-            // Render the scene
-            function animate() {
-                requestAnimationFrame(animate);
-                renderer.render(scene, camera);
-            }
-            animate();
-        });
-    </script>
 </body>

 <!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>
+  </a-scene>
 </body>
+</html>