JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.dotmim.com/sitefiles/babylon/babylon.2.0-alpha.js"></script>
<div id="rootDiv">
<canvas id="renderCanvas"></canvas>
</div>
CSS
html, body, div, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
JavaScript
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("Camera", BABYLON.Vector3.Zero(), scene);
var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -1, -0.2), scene);
light.position = new BABYLON.Vector3(0, 30, 0);
light.intensity = 0.6;
scene.activeCamera = camera;
camera.attachControl(canvas, true);
camera.position = new BABYLON.Vector3(-100.53, 117.56, 8.54);
camera.rotation = new BABYLON.Vector3(0.56, 1.5, 0);
// Torus
var torus = BABYLON.Mesh.CreateTorus("torus", 8, 2, 32, scene, false);
torus.position.y = 6.0;
torus.position.z = 16.0;
var torus2 = BABYLON.Mesh.CreateTorus("torus2", 8, 2, 32, scene, false);
torus2.position.y = 6.0;
var torus3 = BABYLON.Mesh.CreateTorus("torus3", 8, 2, 32, scene, false);
torus3.position.y = 6.0;
torus3.position.z = 32.0;
var torusMaterialN = new BABYLON.StandardMaterial("torusN", scene);
torusMaterialN.diffuseColor = new BABYLON.Color3(1, 1, 0.5);
torusMaterialN.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
var torusMaterial = new BABYLON.StandardMaterial("torus", scene);
torusMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
torusMaterial.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
torus.material = torusMaterial;
torus2.material = torusMaterialN;
torus3.material = torusMaterial;
var nextPos = new BABYLON.Vector3(100, 30, 0)
//Create a scaling animation at 30 FPS
var animationTorus = new BABYLON.Animation("a", "position", 60, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
// Animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({ frame: 0, value: torus.position });
keys.push({ frame: 120, value: torus.position.add(nextPos) });
keys.push({ frame: 180, value: torus.position.add(nextPos) });
animationTorus.setKeys(keys);
var ee = new...