Spaces:

awacke1
/

HTML5-ThreeJS-3D

Running

App Files Files Community

awacke1 commited on Mar 3, 2023

Commit

a833a31

1 Parent(s): 46bf520

Update index.html

Browse files

Files changed (1) hide show

index.html +83 -71

index.html CHANGED Viewed

@@ -1,92 +1,104 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Three.js 3D Scene with Fractal Object</title>
     <style>
         body {
             margin: 0;
             overflow: hidden;
         }
     </style>
 </head>
 <body>
-    <script src="https://threejs.org/build/three.min.js"></script>
-    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
-    <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
-    <script src="https://threejs.org/examples/js/curves/NURBSCurve.js"></script>
     <script>
-        function init() {
-            // Set up the scene
-            const scene = new THREE.Scene();
-            // Set up the camera
-            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.z = 5;
-            // Set up the renderer
-            const renderer = new THREE.WebGLRenderer();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            document.body.appendChild(renderer.domElement);
-            // Set up the skybox
-            const loader = new THREE.CubeTextureLoader();
-            const texture = loader.load([
-                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
-                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg',
-                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
-                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
-                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
-                'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg'
-            ]);
-            scene.background = texture;
-            // Set up the lighting
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-            directionalLight.position.set(0, 1, 0);
-            scene.add(directionalLight);
-            // Set up the geometry
-            const fractal = generateFractal();
-            scene.add(fractal);
-            // Set up the controls
-            const controls = new THREE.OrbitControls(camera, renderer.domElement);
-            // Set up the animation
-            function animate() {
-                requestAnimationFrame(animate);
-                fractal.rotation.x += 0.01;
-                fractal.rotation.y += 0.01;
-                controls.update();
-                renderer.render(scene, camera);
-            }
-            animate();
-            // Set up the GUI
-            const gui = new dat.GUI();
-            gui.add(fractal.material, 'linewidth', 0.1, 10);
-            gui.add(fractal.material, 'opacity', 0.1, 1);
-            gui.add(fractal.material, 'transparent');
-        }
-        function generateFractal() {
-            const lsystem = new LSystem();
-            lsystem.addRule('F', 'F+F-F-F+F');
-            lsystem.setAxiom('F+F+F+F');
-            lsystem.iterate(3);
-            const lines = lsystem.getLines();
-            const material = new THREE.LineBasicMaterial({ color: 0xffffff });
-            const geometry = new THREE.BufferGeometry().setFromPoints(lines);
-            const fractal =  new THREE.LineSegments(geometry, material);
-        return fractal;
     }
-    window.onload = init;
 </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html>
 <head>
+    <meta charset="utf-8">
+    <title>Tilemap Example</title>
     <style>
         body {
             margin: 0;
             overflow: hidden;
         }
+        canvas {
+            width: 100%;
+            height: 100%;
+        }
     </style>
 </head>
 <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
+        // create the scene
+        var scene = new THREE.Scene();
+        // create the camera
+        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.z = 5;
+        // create the renderer
+        var renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // create the tilemap
+        var tilemap = [
+            [0, 0, 0, 0, 0],
+            [0, 1, 1, 1, 0],
+            [0, 1, 1, 1, 0],
+            [0, 1, 1, 1, 0],
+            [0, 0, 0, 0, 0],
+        ];
+        var tileSize = 1;
+        var tileGeometry = new THREE.PlaneGeometry(tileSize, tileSize);
+        var tileMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+        var tiles = [];
+        for (var i = 0; i < tilemap.length; i++) {
+            for (var j = 0; j < tilemap[i].length; j++) {
+                if (tilemap[i][j] === 1) {
+                    var tile = new THREE.Mesh(tileGeometry, tileMaterial);
+                    tile.position.x = (j - tilemap[i].length / 2) * tileSize;
+                    tile.position.y = (-i + tilemap.length / 2) * tileSize;
+                    scene.add(tile);
+                    tiles.push(tile);
+                }
+            }
+        }
+        // create the arrow buttons
+        var arrowUp = document.createElement('button');
+        arrowUp.innerText = '↑';
+        arrowUp.style.position = 'absolute';
+        arrowUp.style.left = '50%';
+        arrowUp.style.top = '10px';
+        arrowUp.addEventListener('click', function() {
+            camera.position.y += 1;
+        });
+        document.body.appendChild(arrowUp);
+        var arrowDown = document.createElement('button');
+        arrowDown.innerText = '↓';
+        arrowDown.style.position = 'absolute';
+        arrowDown.style.left = '50%';
+        arrowDown.style.bottom = '10px';
+        arrowDown.addEventListener('click', function() {
+            camera.position.y -= 1;
+        });
+        document.body.appendChild(arrowDown);
+        var arrowLeft = document.createElement('button');
+        arrowLeft.innerText = '←';
+        arrowLeft.style.position = 'absolute';
+        arrowLeft.style.left = '10px';
+        arrowLeft.style.top = '50%';
+        arrowLeft.addEventListener('click', function() {
+            camera.position.x -= 1;
+        });
+        document.body.appendChild(arrowLeft);
+        var arrowRight = document.createElement('button');
+        arrowRight.innerText = '→';
+        arrowRight.style.position = 'absolute';
+        arrowRight.style.right = '10px';
+        arrowRight.style.top = '50%';
+        arrowRight.addEventListener('click(function() {
+camera.position.x += 1;
+});
+document.body.appendChild(arrowRight);
+    // animate the scene
+    function animate() {
+        requestAnimationFrame(animate);
+        renderer.render(scene, camera);
     }
+    animate();
 </script>
 </body>
+</html>