Spaces:

awacke1
/

HTML5-BabylonJS-Javascript-LSystems

Running

App Files Files Community

awacke1 commited on Mar 3, 2023

Commit

099850b

1 Parent(s): 2bdaabd

Update index.html

Browse files

Files changed (1) hide show

index.html +82 -17

index.html CHANGED Viewed

@@ -1,19 +1,84 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
 <html>
+<head>
+    <meta charset="utf-8" />
+    <title>Babylon.js Game Example</title>
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+    <style>
+        canvas {
+            width: 100%;
+            height: 100%;
+            touch-action: none;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+    <script>
+        window.addEventListener('DOMContentLoaded', function () {
+            var canvas = document.getElementById('renderCanvas');
+            var engine = new BABYLON.Engine(canvas, true);
+            var createScene = function () {
+                var scene = new BABYLON.Scene(engine);
+                // Create a camera
+                var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+                // Create a light
+                var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
+                // Create an array to hold the spheres
+                var spheres = [];
+                // Load the texture and bump map
+                var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);
+                var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);
+                // Create a fountain of spheres that follow the mouse
+                canvas.addEventListener('mousemove', function (event) {
+                    // Create a new sphere
+                    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: Math.random() * 2 + 0.5, segments: 16}, scene);
+                    sphere.position = new BABYLON.Vector3(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);
+                    sphere.material = new BABYLON.StandardMaterial("texture", scene);
+                    sphere.material.diffuseTexture = texture;
+                    sphere.material.bumpTexture = bumpMap;
+                    spheres.push(sphere);
+                    // Follow the mouse with the spheres
+                    var ray = scene.createPickingRay(event.clientX, event.clientY, BABYLON.Matrix.Identity(), camera);
+                    var pickInfo = scene.pickWithRay(ray, function (mesh) { return mesh == sphere; });
+                    if (pickInfo.hit) {
+                        sphere.position.copyFrom(pickInfo.pickedPoint);
+                    }
+                    // Animate the texture of the spheres
+                    var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+                    var keys = [];
+                    keys.push({frame: 0, value: 0});
+                    keys.push({frame: 100, value: 1});
+                    textureAnimation.setKeys(keys);
+                    sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
+                    sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
+                    sphere.material.diffuseTexture.uScale = 10;
+                    sphere.material.diffuseTexture.vScale = 10;
+                    sphere.animations.push(textureAnimation);
+                    scene.beginAnimation(sphere, 0, 100, true);
+                    // Animate the spheres
+                    var animation = new BABYLON.Animation("myAnimation", "position.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+var keys = [];
+keys.push({frame: 0, value: sphere.position.y});
+keys.push({frame: 50, value: sphere.position.y + 2});
+keys.push({frame: 100, value: sphere.position.y});
+animation.setKeys(keys);
+sphere.animations.push(animation);
+scene.beginAnimation(sphere, 0, 100, true);
+});
+            return scene;
+        }
+        var scene = createScene();
+        engine.runRenderLoop(function () {
+            scene.render();
+        });
+        window.addEventListener('resize', function () {
+            engine.resize();
+        });
+    });
+</script>
+</body>
+</html>