Textured Cube in Babylon.js from Dropbox
HTML
<canvas id="renderCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
JavaScript
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
BABYLON.SceneLoader.Load("https://raw.githubusercontent.com/BabylonJS/Website/master/Scenes/Sponza/", "Sponza.babylon", engine, function (scene) {
// Wait for textures and shaders to be ready
scene.executeWhenReady(function () {
scene.activeCamera.attachControl(canvas);
// Once the scene is loaded, just register a render loop to render it
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 0.3, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
scene.onPointerDown = function (evt, pickResult) {
console.log(pickResult);
if(pickResult.hit){
// if the click hits the ground object, we change the impact position
if (pickResult.pickedMesh.name = "sphere1") {
sphere.dispose()
}
}
};
engine.runRenderLoop(function() {
sphere.position.z -= 0.002;
scene.render();
});
});
}, function (progress) {
// To do: give progress feedback to user
});
}