JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/BezierPlugin.min.js"></script>
<script src="https://rawgit.com/BabylonJS/Babylon.js/v1.11/babylon.1.11.js"></script>
<body>
<div id="rootDiv">
<canvas id="canvas_renderer"></canvas>
</div>
</body>
CSS
html, body, div, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
JavaScript
// Init
var canvas = document.getElementById("canvas_renderer");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// Camera
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(300, 200, -800), scene);
camera.checkCollisions = true;
camera.maxZ = 10000;
camera.attachControl(canvas);
// Light
var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 50, 0), scene);
// Box
var box = BABYLON.Mesh.CreateBox("box", 50, scene);
var timeline = new TimelineLite();
var quantity = 100;
var duration = 5;
var path = [{x:0, y:0, z: 0}, {x:50, y:100, z: 70}, {x:300, y:20, z: 140}, {x:400, y:200, z: 210}, {x:500, y:0, z: 255}];
var position = {
x: path[0].x,
y: path[0].y,
z: path[0].z
};
var tween = TweenLite.to(position, quantity, {bezier:path, ease:Linear.easeNone});
console.log(path);
path.shift();
for (var i = 0; i < quantity; i++) {
tween.time(i); //jumps to the appropriate time in the tween, causing position.x and position.y to be updated accordingly.
timeline.set(box.position, {
x: position.x,
y: position.y,
z: position.z
}, i * (duration / quantity));
}
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function () {
scene.render();
});