I want to load a file, using Babylon.js, that has been uploaded by the user. I've looked around but can only find examples of loading babylon scene files.
Is there a way of loading .obj and/or .stl files directly with Babylon.js without having to convert them to .babylon files?
Thanks.
On
Have you tried assetManager? It can solve your problem automatically. In plain it is only an array filled with loaded data enriched by nice Loading screen, more here: https://github.com/BabylonJS/Babylon.js/wiki/Using-AssetsManager
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Babylon.js sample code assetsManager loading</title>
<!-- Babylon.js -->
<script src="index_subory/hand.js"></script>
<script src="index_subory/cannon.js"></script>
<script src="index_subory/oimo.js"></script>
<script src="index_subory/babylon.2.0.debug.js"></script>
<script src="index_subory/jquery.min.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<div style="background-color:grey;color:white;font-weight:bold;margin-left:auto;margin-right:auto;text-align:center;">Pre prehliadače s WebGL: WebGL Javascript pokus v babylon.js - ovládaj šípkami na klávesnici a ťahaním myškou:<br><div style="background-color:grey;color:white;font-weight:bold;">The Pulse [Ak nevidíte video, chyba je v prehliadači, ľutujeme, možno novší to zvládne ;-) ] </div></div>
<canvas height="782" width="1440" id="renderCanvas"></canvas>
<script>
var canvass = $('#renderCanvas');
// check to see if we can do webgl
// ALERT FOR JQUERY PEEPS: canvas is a jquery obj - access the dom obj at canvas[0]
var dcanvas = canvass[0];
expmt = false;
if ("WebGLRenderingContext" in window) {
//alert("browser at least knows what webgl is.");
}
// some browsers don't have a .getContext for canvas...
try {
gl = dcanvas.getContext("webgl");
}catch (x){
gl = null;
}
if (gl == null) {
try {
gl = dcanvas.getContext("experimental-webgl");
}catch (x){
gl = null;
}
if (gl == null) {
//console.log('but can\'t speak it');
}else {
expmt = true; //alert('webgl experimentally.');
}
} else {
//alert('webgl natively');
}
if (gl || expmt) {
//alert("loading webgl content.");
} else {
alert("CHYBA: Váš prehliadač nepodporuje WebGL, ľutujeme. (ERROR: Your browser does not support WebGL, sorry.)");
canvas.remove();
}
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 1.0, 1.0, scene);
var createScene = function () {
// setup environment
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10,80), scene);
var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);
var light2 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -80), scene);
var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene);
simpleMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0);//Green
sphere1.material = simpleMaterial;
sphere1.position.x=-4;
sphere1.position.z=-4;
sphere1.position.y=4.5;
camera.position.x = -9;
camera.position.y = 4;
camera.position.z = -10;
camera.rotation.x = .28;
camera.rotation.y = .707;
camera.rotation.z = 0;
camera.speed = .2;
camera.attachControl(canvas);
var ecran = BABYLON.Mesh.CreatePlane("impact", 8, scene);
ecran.rotation.z = 2*Math.PI;
// Video material
var videoMat = new BABYLON.StandardMaterial("textVid", scene);
videoMat.diffuseTexture = new BABYLON.VideoTexture("video", ["index_subory/v.ogv"], 256, scene, false);
videoMat.backFaceCulling = false;
ecran.material = videoMat;
// Mirror
//var mirror = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
var mirror = BABYLON.Mesh.CreateGround("gnd", 16, 16, 1, scene, true);
// var mirror = BABYLON.Mesh.CreatePlane("Mirror", 5.0, scene);
mirror.position = new BABYLON.Vector3(0, -0.5, 0);
mirror.material = new BABYLON.StandardMaterial("mirror", scene);
mirror.material.backFaceCulling = false;
// mirror.material.diffuseColor = new BABYLON.Color3(0.0, 0, 0.1);
mirror.material.reflectionTexture = new BABYLON.MirrorTexture("mirror", 512, scene, true);
mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -1.0);
mirror.material.reflectionTexture.renderList = [ecran,sphere1];
mirror.material.reflectionTexture.level = 1;
//mirror.material.reflectionTexture.coordinatesMode = BABYLON.Texture.PROJECTION_MODE;
return scene;
}
var scene = createScene();
var assetsManager = new BABYLON.AssetsManager(scene);
var binaryTask = assetsManager.addBinaryFileTask("binary task", "index_subory/v.ogv");
//engine.displayLoadingUI();
engine.loadingUIText = "Loading... (Načítavanie...)";
assetsManager.onTaskSuccess = function (task) {
// Do something with task.data.
//engine.hideLoadingUI();
};
assetsManager.onTaskError = function (task) {
// Do something with task.data.
alert('Error with loading by assetsManager...');
};
assetsManager.onFinish = function (task) {
//engine.hideLoadingUI();
engine.runRenderLoop(function () {
scene.render();
sphere1.rotation.y+=0.05;
});
};
assetsManager.load();
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
}else{
alert("Chyba: Nemôžem spustiť WebGL. (Error: Can't run WebGL.)");
}
</script>
</body></html>
This is my code used for preloading of the video with nice Loading message, then scene is presented.
to reduce framework size, Babylon.js does not include file loader. But you can go there an use one of our loader: https://github.com/BabylonJS/Babylon.js/tree/master/loaders