All geek questions in one place

Download .obj and .stl to Babylon.js

I want to download a file using Babylon.js, which was uploaded by the user. I looked around, but I can find examples of loading babylon scene files.

Is there a way to download .obj and / or .stl files directly using Babylon.js without having to convert them to .babylon files?

Thanks.

+5
source share
2 answers

to reduce the size of the frame, Babylon.js does not include a file loader. But you can go there using one of our downloaders: https://github.com/BabylonJS/Babylon.js/tree/master/loaders

+3
source

Have you tried the resource agent? It can solve your problem automatically. In simple terms, this is just an array filled with downloaded data, enriched with a good loading screen, 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 to preload the video with a nice downloadable post, then the scene is displayed.

0
source

Source: https://habr.com/ru/post/1206828/

More articles:


All Articles