<canvas id="renderCanvas"></canvas>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 0, 0.2);
var camera = new BABYLON.ArcRotateCamera('Camera', 1.0, 1.0, 12, BABYLON.Vector3.Zero(0, 1, 0), scene);
camera.attachControl(canvas, false);
var light = new BABYLON.HemisphericLight('Hemi', new BABYLON.Vector3(0, 1, 0), scene);
light.groundColor = new BABYLON.Color3(0.5, 0, 0.5);
var box = new BABYLON.Mesh.CreateBox('mesh', 3, scene);
box.showBoundingBox = true;
var material = new BABYLON.StandardMaterial('std', scene);
material.diffuseColor = new BABYLON.Color3(0.5, 0, 0.5);
box.material = material;
/* var alpha = 0;
box.scaling.y = 1.2;
scene.beforeRender = function() {
box.rotation.y = alpha;
alpha += 0.01;
};
*/
gsap.to(box.rotation, {y:12, x:5, duration:4, repeat:-1, yoyo:true})
gsap.to(box.position, {x:5, duration:4, repeat:-1, yoyo:true})
gsap.to(box.scaling, {y:0.5, duration:2, repeat:-1, yoyo:true})
return scene;
}
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
window.addEventListener('resize', function() {
engine.resize();
})
This Pen doesn't use any external CSS resources.