|
@@ -1,122 +0,0 @@
|
|
|
-<html>
|
|
|
|
|
- <head>
|
|
|
|
|
- <style>
|
|
|
|
|
- html, body {
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- #renderCanvas {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- touch-action: none;
|
|
|
|
|
- }
|
|
|
|
|
- </style>
|
|
|
|
|
- </head>
|
|
|
|
|
- <body>
|
|
|
|
|
- <canvas id="renderCanvas"></canvas>
|
|
|
|
|
- <script src="tools/DevLoader/BabylonLoader.js"></script>
|
|
|
|
|
- <script>
|
|
|
|
|
- "use strict";
|
|
|
|
|
- BABYLONDEVTOOLS.Loader
|
|
|
|
|
- .load(function() {
|
|
|
|
|
- // Get the canvas element from our HTML above
|
|
|
|
|
- var canvas = document.getElementById("renderCanvas");
|
|
|
|
|
-
|
|
|
|
|
- // Load the BABYLON 3D engine
|
|
|
|
|
- var engine = new BABYLON.Engine(canvas, true);
|
|
|
|
|
-
|
|
|
|
|
- // This begins the creation of a function that we will 'call' just after it's built
|
|
|
|
|
- var createScene = function() {
|
|
|
|
|
-
|
|
|
|
|
- // Now create a basic Babylon Scene object
|
|
|
|
|
- var scene = new BABYLON.Scene(engine);
|
|
|
|
|
-
|
|
|
|
|
- // Change the scene background color to green.
|
|
|
|
|
- scene.clearColor = new BABYLON.Color3(0, 1, 0);
|
|
|
|
|
-
|
|
|
|
|
- // This creates and positions a free camera
|
|
|
|
|
- var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
|
|
|
|
|
-
|
|
|
|
|
- // This targets the camera to scene origin
|
|
|
|
|
- camera.setTarget(BABYLON.Vector3.Zero());
|
|
|
|
|
-
|
|
|
|
|
- // This attaches the camera to the canvas
|
|
|
|
|
- camera.attachControl(canvas, false);
|
|
|
|
|
-
|
|
|
|
|
- // This creates a light, aiming 0,1,0 - to the sky.
|
|
|
|
|
- var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
|
|
|
|
|
-
|
|
|
|
|
- // Dim the light a small amount
|
|
|
|
|
- light.intensity = .5;
|
|
|
|
|
-
|
|
|
|
|
- // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
|
|
|
|
|
- var squareSize = 20;
|
|
|
|
|
- var spheres = []
|
|
|
|
|
- for (var i = 0; i < squareSize; i++) {
|
|
|
|
|
- for (var j = 0; j < squareSize; j++) {
|
|
|
|
|
- for (var k = 0; k < 3; k++) {
|
|
|
|
|
- var sphere = BABYLON.Mesh.CreateSphere("sphere", 4, 0.5, scene);
|
|
|
|
|
-
|
|
|
|
|
- // Move the sphere upward 1/2 its height
|
|
|
|
|
- sphere.position.z = - squareSize / 4 + j / 2;
|
|
|
|
|
- sphere.position.x = - squareSize / 4 + i / 2;
|
|
|
|
|
- sphere.position.y = - squareSize / 4 + k / 2;
|
|
|
|
|
- sphere.material = new BABYLON.StandardMaterial("test");
|
|
|
|
|
- if (Math.random() > 0.2) {
|
|
|
|
|
- // sphere.material.diffuseTexture = new BABYLON.Texture("test-low.jpeg", scene);
|
|
|
|
|
- }
|
|
|
|
|
- if (Math.random() > 0.2) {
|
|
|
|
|
- // sphere.material.bumpTexture = new BABYLON.Texture("test-low.jpeg", scene);
|
|
|
|
|
- }
|
|
|
|
|
- sphere.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
|
|
|
|
|
- sphere.material.specularColor = new BABYLON.Color3(Math.random() < 0.8 ? 0 : 1, Math.random() < 0.8 ? 0 : 1, Math.random() < 0.8 ? 0 : 1);
|
|
|
|
|
- sphere.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
|
|
|
|
|
- sphere.material.freeze();
|
|
|
|
|
-
|
|
|
|
|
- sphere.freezeWorldMatrix();
|
|
|
|
|
- spheres.push(sphere);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- var t = 0;
|
|
|
|
|
- scene.registerAfterRender(function() {
|
|
|
|
|
- for (var i = 0; i < spheres.length; i++) {
|
|
|
|
|
- // spheres[i].material.diffuseColor = new BABYLON.Color3(Math.abs(Math.sin(t/100)), Math.abs(Math.cos(t/200)), Math.abs(Math.sin(t/500)));
|
|
|
|
|
- // if (t % 120 < 60) {
|
|
|
|
|
- // spheres[i].material.freeze();
|
|
|
|
|
- // } else {
|
|
|
|
|
- // spheres[i].material.unfreeze();
|
|
|
|
|
- // }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- // light.direction = new BABYLON.Vector3(Math.cos(t / 30), 1, Math.sin(t / 30));
|
|
|
|
|
- t++;
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene
|
|
|
|
|
-
|
|
|
|
|
- // Leave this function
|
|
|
|
|
- return scene;
|
|
|
|
|
-
|
|
|
|
|
- }; // End of createScene function
|
|
|
|
|
-
|
|
|
|
|
- // Now, call the createScene function that you just finished creating
|
|
|
|
|
- var scene = createScene();
|
|
|
|
|
-
|
|
|
|
|
- // Register a render loop to repeatedly render the scene
|
|
|
|
|
- engine.runRenderLoop(function () {
|
|
|
|
|
- scene.render();
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- // Watch for browser/canvas resize events
|
|
|
|
|
- window.addEventListener("resize", function () {
|
|
|
|
|
- engine.resize();
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
- </script>
|
|
|
|
|
- </body>
|
|
|
|
|
-</html>
|
|
|
Benjamin Guignabert