Search the Community

Hello, I'm pretty new to BabylonJs. I have created a few simple applications with it. What I want to do in this current project is be able to integrate babylonjs and flask microframework. I am much more familiar with python, flask and sqlalchemy etc. than I am similar javascript frameworks. I had set up some babylonjs code for visualizing a 3D model on a webpage using html, css, and javascipt only. I use ImportMesh to load the gltf (or glb) model into the scene. This works fine as I want. I have been problems migrating this to a flask app format. I tried three different ways and each time I have hit problems. I will describe each below. 1. Use ImportMesh just like I did for the 'plain' html, css and javascript: I tried to incorporate my existing html, css, and javasript files in a simple flask directory structure / simple app i.e. where my html, css, and javascript are in subdirectories to a main app.py file - exactly how I would set up any flask app. Every time I do that I get a notification saying that the model file (.gltf or .glb) can't be found and it throws a 404 error in the console. I've tried multiple different ways to define the path to the model file but it continues to throw this error. 2. Use babylon and model html tags instead: I then got rid of the javascript file altogether and I simply used the babylon and model html tags in my html to define the model rather than trying to import the model using ImportMesh. This works fine. The issue here is when i tried to control the css and add some actions to the css (or similar in javascript) like repositioning the container when I click a button it doesn't seem to work like the tutorial showed in the documentation. 3. I then tried to define my gltf as a text string. The thinking here was if I remove the reference to an external model file it could resolve my first issue. First I converted my 0.bin file to a base 64 encoded string and included it directly in my gltf file. I then took the entire gltf file as a text string into my javascript file and essentially called the model as a text string from there rather than as an external file. I checked the file worked in the babylonjs sandbox before I did this and it was fine but when I try to run my flask app it continues to throw an error saying it can't find the 0.bin file. The issue is here that this file is no longer needed (it was orphaned in my previous step as I have described when I converted it to base64). Overall, can someone help with what I need to do to get the ImportMesh function working in my original method. I'd much prefer to use the javascript ImportMesh way to do it as I feel (rightly or wrongly) I have much more control over the scene and control over the meshes etc. when I am coding in the javascript. Thanks.

Hi coders, I have a JSON data coming through some API. This data is List of objects. For example... [{ "rackid": "rack_1", "components": { "cpu_nodes": [ { "name": "cn1", "state": "idle", "power_status": "Up" }, { "name": "cn2", "state": "idle", "power_status": "Up" }, { "name": "cn3", "state": "idle", "power_status": "Up" }, { "name": "cn4", "state": "idle", "power_status": "Up" } ], "service_nodes": 2, "login_nodes": 1, "master_nodes": 2 } }] This could have any number of objects in the list. And also I have models ready for each components in incoming data as .babylon. Now I want to render the meshes using above data. For this will require to call BABYLON.SceneLoader.ImportMesh() inside a for loop. But it's not working for me what can I do?

Hi : I am new beginner of Babylonjs , I want to load a mesh(.obj) by typescript. Here is my code （run in playground）： class Playground { public static CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): BABYLON.Scene { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; // BABYLON.SceneLoader.ImportMesh("Rabbit", "scenes/","Rabbit.babylon", scene, function (newMeshes) { BABYLON.SceneLoader.ImportMesh("Rabbit", "scenes/Box/","Box.obj", scene, function (newMeshes) { var rabbit = newMeshes[0]; if(rabbit == null) { console.log("rabbit is null") } else { rabbit.scaling = new BABYLON.Vector3(0.1,0.1,0.1); console.log("I can see the rabbit"); } // scene.beginAnimation(skeletons[0], 0, 100, true, 0.8); }); return scene; } } When I load Box.obj I got a log "rabbit is null". but when i load a Rabbit.babylon file it work good. What happened when I loaded.Obj? Who can help me load .obj Mesh By Typescript? Thank you

Say you have a project that loads has a large number of meshes, for example furniture, each with their own (multi)material. Now the actual scene only displays a select few of the loaded meshes according to what the user wants to see (eg. house blueprint). However all the vertices of all meshes and all textures of all materials are loaded into memory, which of course increases the memory consumption quite a bit. I've tried using the meshName filter of the ImportMesh call, but that increases the scene loading time by quite a bit since it will reload and reparse the .babylon file for every asset used in the scene to load the specific mesh. Additionally if the user wants to add another asset to the scene after the initial load, the .babylon file will have to be called yet again. Then I tried to at least dispose() all materials of all unused assets to free up the texture memory after loading them, and only recreate the required material if a mesh is actually enabled in the scene (by storing the texture url in an array), but mass disposing of materials/textures that are not yet done loading causes quite some quirks in the babylon scene where the textures are sometimes applied to random other meshes and even random renderTargetTextures like my shadowgenerator. Any ideas on how to reduce the memory footprint? Thanks in advance

Hello, If there is an existing scene - is it possible to pre-import meshes without starting rendering them (something like isEnabled = false from the beginning)? For example, I would like to be able to load mesh from a *.babylon file into memory. So later, when/if I need it, I just call mesh.setEnabled(true) to make it visible. If I do normal importMesh() - drawing a mesh first and then erasing it feels a little hacky, so I'm interested whether there is a cleaner way?! Thanks!

Hi All, I haven't been active here for quite some time. 1. I want to serializeMesh and all of it children -> save. 2. ImportMesh with all childrens. I have no problem save and load single mesh, but not with childrens. So how I can achieve this? Any idea?

Hello, I cannot get a .babylon file to load using ImportMesh. Please take a look if you can. http://qedsoft.com/DEMOS2017/bjs_loader/index4.html I do receive a console error: But am not doing anything different than I've repeatedly done in the past. Perhaps I'm not identifying an attribute correctly? Thanks, DB

Hi, I have a scene where: - I import several meshes - Then I have code wrapped in `scene.executeWhenReady` Everything runs fine, until I test importing a non existent file. Then `scene.executeWhenReady` never fires, presumably because it never loaded the aforementioned file. I already have a fallback coded, so is there a way that I can ignore this failed import, with regards to `executeWhenReady`?

I tried to import a model through ImportMesh, and it made an error in the console, and mesh disappeared at some part of the camera. url：https://forreall.cn/3ds/app/debugcloud/loader.html?model_hash=ABGW&model_version=1

Hello everyone, I have two questions about the SceneLoader.ImportMesh() function. 1- Does it import objects including their materials or should we do it by ourselves in the callback body ? I tried importing object from a babylon file (generated with 3DsMax plugin including materials) but the Mesh in babylon scene has no mateiral ! 2- The meshes are added automatically to the scene (given as an argument to the importScene function). But I wish to import the objects and then have the control to add the desired mesh with Scene.addMesh(newMesh) Is that possible ? Thanks A.

What's the difference between assetsManager and ImportMesh for importing custom meshes? thanks very much

In my application I am loading a mesh using SceneLoader.ImportMesh. The mesh has StandardMaterial with specular color set to (0.05,0.05,0.05) If I load this using babylonjs 3.0 the specular value loads properly If I load this using babylonjs 3.1 alpha the specular value is set to (1,1,1) Unfortunately I am unable to reproduce this in the playground. In playground the specular value loads properly. So I am assuming the mesh specular value is being effected by some other setting in my app I tried changing light type, light color, scene clear color, scene ambient color, shadow on off, skybox on off. No luck Can't figure out what. Anybody any idea ?

Hi, I've some trouble though debugging so much..I have an obj/mtl file and the mesh and textutre is basically loading well, so far so good. But the texture (png) is an alpha image and this isn't transparent after loading. This is technically OK because there is no implementation inside objFileLoader for this case. I just want to set mesh.material.diffuseTexture.hasAlpha = true in the success-callbak of the ImportMesh-function , but the material isn't bound at this time. So, where to set "hasAlpha=true" , at which time is the material bound to the mesh? Thanks PS: I can enable it in the render loop (hack, because it's undeterminable how much frames I must wait), I also can activate hasAlpha with the DebugLayer manually BABYLON.SceneLoader.ImportMesh("", "blabla", "blabla.obj", scene, function (meshes) { var m = meshes[0]; m.material <== NOT AVAILABLE scene.getMaterialByName("Mat1"); <== scene.materials==empty }); scene.registerBeforeRender(function () { frame++; if (frame == 100) { var mbyname = demo.scene.getMaterialByName("Mat1"); <== OK , Material is bound to the mesh }

Hello every one, Thanks you fr your help, trying to import a mesh from blender to my scene but failed... Here's my code : var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // The first parameter can be used to specify which mesh to import. Here we import all meshes BABYLON.SceneLoader.ImportMesh("", "scenes/", "untitled.babylon", scene, function (newMeshes) { // Set the target of the camera to the first imported mesh camera.target = newMeshes[0]; }); scene.registerBeforeRender(animate); var LinesRed = BABYLON.Mesh.CreateLines("LinesRed", [ new BABYLON.Vector3(boxRed.position.x, boxRed.position.y, boxRed.position.z), new BABYLON.Vector3(planeRed.position.x, planeRed.position.y, planeRed.position.z), ], scene); // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene var ground = BABYLON.Mesh.CreateGround("ground1", 15, 15, 5, scene); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); // Resize window.addEventListener("resize", function() { engine.resize(); }); }); At first I kept my previous light, camera and so on but nothing showed up I used the importmesh from teh playground, it appears on sandbox Do I have to delete the camera, light from blender and keep it on my code because i only want the mesh Here is the browser console Thank you all

Hi everyone, I am working on a scene that requires import meshes from .babylon file, most of the time I debug the scene on android mobile browser, and I got this error while trying to load the scene in iphone 5 & 6 (ios 10.2.1 up to date)safari browser: Error status: 0 - Unable to load myfile.babylon this is the link of the webpage http://52.74.240.184/infographics/game_RisingSeaLevel/. I have no problem loading the scene on desktop, android mobile browser(chrome, firefox, opera), however, when I try to load the scene on iphone 6, most of the times I encounter the above error during the middle of importing mesh, if you open the webpage using iphone, there is a chance for you to stuck in the loading screen, when the error occurs. Nonetheless, there is a few times the scene can be successfully loaded, but only a few times. May I know if anyone who ever got with this error knows what is going on, as I am mainly working on the content of the 3D scene rather than handle the back-end part, thanks!

Hello all, I have a quick question if anyone could help me with. I've set up a scene and imported multiple meshes that were made in 3ds Max and have them positioned where I want them on the scene. It consists of a PC case and all the PC's components beside it. Now I'm trying to implement the drag and drop function so I can click on an imported mesh and be able to drag it into the PC case and position it where it's supposed to be. I tried adding the code from the drag and drop demo from the playground into my code but when I run it, it doesn't do anything. Can I use this drag and drop function on imported meshes or is it only for meshes that are created from scratch in the code? Thanks! PS, I would add a playground with my models and code but I'm unsure how to set it up to show my models.

Hi, new to Babylon.js and the forum. I want to use the renderOutline property on the rabbit.babylon model from BONES demo. BABYLON.SceneLoader.ImportMesh("", "models/", "rabbit.babylon", scene, function (newMeshes, particleSystems, skeletons) { var mdl_Rabbit = newMeshes[0]; mdl_Rabbit.position = new BABYLON.Vector3(0, 0, 40); mdl_Rabbit.renderOutline = true; }); It changes the position of the rabbit but it does not render outline. Also for some reason, I could use newMeshes[12] and the rabbit would still display correctly. mdl_Rabbit.showBoundingBox doesn't work either. Overall it's obvious I don't understand how the ImportMesh works. So, what am I missing and how do I get renderOutline to work?

BABYLON.SceneLoader.ImportMesh not working on mobile devices with no manifest file. babylon version 2.4 from row 3492, after first load manifest with timestamp failed, it initialize another attempt to load manifest without timestamp, but this call will never trigger the error event, thus noManifestFile is never called. TEsted on iOS simulator and real iOS device, not working. If I stopped attempt to load the manifest file and call noManifestFile directly, mesh is loaded correctly.

I import mesh from a json babylon file into BabylonJS with BABYLON.SceneLoader.ImportMesh, I then use scene.beginAnimation(allMeshes[meshName], 0, 100, true); This works well for 1 animation. How can I have multiple animation for 1 mesh ( walking, running, idle, laughing) and use it in Babylon ? In Blender you can give names to the different actions. I searched the docs but didn't found an answer. 1 temporary solution I see, import the same mesh with 1 different animation multiples times, and when we want to start an animation we replace the mesh with the same at the same position except it has a different animation and then call scene.beginAnimation .

Hi everyone, I'm Babylon newbie Problem just as Topic, I have tried importMesh like this: but I can't find where should I upload texture or which fileread type should I get. Thx for help I think my question is not clear, I upload .babylon and its texture at same time. but it comes [Error while trying to load texture] So I was wonder where should I put after load texture to let ImportMesh(method) get,What kind of type should I load (readAsText?readAsDataURL?),how to let ImportMesh to know the textures I upload?

I am wondering if there is a way to scale or resize an importMesh. I need to enlarge the mesh from its original import size. I am currently doing the following, but it has no effect on the size of the mesh: BABYLON.SceneLoader.ImportMesh("", "meshes/", selectedMesh, scene, function(addedMeshes) { // tried this addedMeshes[0].scaling.x = 67; // Also tried this addedMeshes[0].scaling = new BABYLON.Vector3(67, 67, 67); }); Is there a way I can just resize/scale the imported mesh?

Hi All: I'm a game artist from Taiwan.And study coding 2 months. I reference the part "Loading Assets" of the official documentation.Here is my confusion : Q1： I type this code ,but didn't know what does "newMeshes" mean ? The object which i use has two part,one is "hair",the other is "body" . When I type like this" var head = newMeshes[2]; ",the hair is displayed correctly. Did it mean that The numbers in brackets are the ordinal numbers of this object? For example: one object has two meshes that are "A" and "B", So could i define the code ： var A = newMeshes[0]; var B = newMeshes[1]; Q2: I can use the "hair" and "body" because "var head" and "var body" in the code. But how could i var the whole object in code? I type like this but it doesn't work correctly. Q3: When i use the "Loading Scene" exported form 3DsMax 2016 like this: How could i var the objects which is already existed in this scene in script? Could i add one directional light with shadow in this scene in script,and how to code? Thanks for your attention. Sincerely, Ray

It's really weird problem. I have same several .babylon files export from 3dsMax. They are same mesh(plane) but different material. When I call the BABYLON.SceneLoader.ImportMesh function to load these files like below. BABYLON.SceneLoader.ImportMesh("", "./particle/", "01_bullet.babylon", scene, function (newMeshes){ }); BABYLON.SceneLoader.ImportMesh("", "./particle/", "30_bullet.babylon", scene, function (newMeshes){ }); The weird thing is that the second mesh has the same material from the first mesh. The babylon version is 2.2.

The latest commits by DK, labelled as "Keep working on serialization refactoring", on the 2.3 alpha preview release started giving me SceneLoader.ImportMesh error as follow: Unable to import meshes from /location/file.babylon (Exception: TypeError: y.ParseMultiMaterial is not a function)An even more recent commit, labelled as "Serialization/Parsing refactoring done", gave me this instead: Unable to import meshes from /location/file.babylon (Exception: TypeError: y.Parse is not a function)The latest commit as of this time of writing still gives me the above error message. My mesh exported out from and using the Blender Exporter (version 3.0.6) imports and loads without errors with the previous commits. (Was wondering why the screen was stuck at the preloader until I decided to stick an onerror callback function into the mesh loader.) I don't see updates to the Blender Exporter or I'd try that. p/s: Oh and by the way, hi there, all of you kind souls on here. I've been stalking these forums a lots this past week when I decided to start my webGL exploration with Babylon.js. Also been itching to communicate and I finally found enough reason to create an account for this post. Cheers!

I'm pretty fine working with the .babylon file format. Exporter which was developed for Blender 3D editor works perfectly and if to load the exported model using the next code: // won't write the full code// because it was fetched from the playground and it's very standard and worksBABYLON.SceneLoader.Load("", "fileName.babylon", engine, function (newScene) {...works well and WebGL renderer in browser shows my model. But, what if I don't want to load models as static files which must be saved in public folder of HTTP-server ( IIS, Apache, lighttpd, nginx, etc.. ). For e.g. I wanna load a .babylon file from the user's side or to secure the access to .babylon files at my backend. All right, let's watch the situation, if I provide some kind of Uploader (using File API from browser) in my web-application, from which user will be able to load 3D-models from their PC or other devices. I'm trying to load models like this way: File uploading ( change event of input-file ) which works well: function handleFiles( event ) { var uploader = event.srcElement || event.currentTarget; var files = uploader.files; var reader = new FileReader(); reader.onload = function( event ) { var data = JSON.parse( event.target.result ); loadCustomMesh( data ); }; // passing only single mesh because of testing purpose reader.readAsText( files[ 0 ] ); }Handling geometry and adding to scene: function loadCustomMesh( data ) { var mesh = new BABYLON.Mesh( Math.random().toString(), scene ); mesh.setVerticesData( BABYLON.VertexBuffer.PositionKind, data.meshes[ 0 ].positions, true ); mesh.setVerticesData( BABYLON.VertexBuffer.NormalKind, data.meshes[ 0 ].normals, true ); mesh.setIndices( data.meshes[ 0 ].indices ); mesh.position = new BABYLON.Vector3( 0, 0, 0 ); ...It works FINE! But!!! Without materials... I've found that multimaterial is here from the uploaded data: But if to use the next code: mesh.material = data.multiMaterials[ 0 ];Which is valid exactly for this sample, it throws the next error: Uncaught TypeError: t.needAlphaBlending is not a functionAnd I don't even know what to do next, any ideas?