Temechon Posted August 13, 2015 Share Posted August 13, 2015 Hey guys, We just released a new loader for Babylon.js to read OBJ (and MTL) files. This loader is now part of Babylon 2.2 (but it's working on 2.1).As it's a loader, it is an external file that should be included in your project in you want to use it (as explained here) Here is a demo: give it some time, we tried to load BIG files Can you guess which game these assets are coming from ? I hope you will like it! Cheers Dad72, iiceman, adam and 1 other 4 Quote Link to comment Share on other sites More sharing options...
davrous Posted August 13, 2015 Share Posted August 13, 2015 Awesome job! Thanks David Temechon 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 13, 2015 Share Posted August 13, 2015 Can't agree more!@David: we should add it in the sandbox alongside STL and the upcoming glTF Quote Link to comment Share on other sites More sharing options...
davrous Posted August 13, 2015 Share Posted August 13, 2015 Indeed! Quote Link to comment Share on other sites More sharing options...
Dad72 Posted August 13, 2015 Share Posted August 13, 2015 C’est wouaw. Awesome job! Should be the same DAE or FBX charger for animate object Quote Link to comment Share on other sites More sharing options...
reddozen Posted August 14, 2015 Share Posted August 14, 2015 YAY! now I should be able to use recast path finding. dad72,Native DAE support would be awesome! Quote Link to comment Share on other sites More sharing options...
wind Posted March 24, 2016 Share Posted March 24, 2016 On 8/13/2015 at 11:27 PM, Temechon said: Hey guys, We just released a new loader for Babylon.js to read OBJ (and MTL) files. This loader is now part of Babylon 2.2 (but it's working on 2.1). As it's a loader, it is an external file that should be included in your project in you want to use it (as explained here) Here is a demo: give it some time, we tried to load BIG files Can you guess which game these assets are coming from ? I hope you will like it! Cheers @Temechon : I uploaded the asset ("Bane_3.obj") to other web server (e.g. http://bayu.net23.net) and cannot load it. If I load the asset from the DropBox, with the code below, it will work: var bane = loader.addMeshTask("bane", "", "https://dl.dropboxusercontent.com/u/17799537/objFileLoader/Bane/", "Bane_3.obj"); But if I load the asset from the other web server (e.g. http://bayu.net23.net), with the code below, it doesn't work: var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "Bane_3.obj"); The whole code is below (I got it from your demo (http://www.babylonjs-playground.com/#28YUR5) ) : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="babylon.js"></script> <script src="hand.js"></script> <script src="cannon.js"></script> <!-- optional physics engine --> <script src="oimo.js"></script> <script src="babylon.objFileLoader.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script> // Get the canvas element from our HTML above var canvas = document.getElementById("renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // This begins the creation of a function that we will 'call' just after it's built var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene); var cam = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 5, new BABYLON.Vector3(0, 3, 0), scene); cam.attachControl(canvas); var loader = new BABYLON.AssetsManager(scene); var position = -5; var pos = function(t) { t.loadedMeshes.forEach(function(m) { m.position.x -= position; }); position += 5; }; //var bane = loader.addMeshTask("bane", "", "https://dl.dropboxusercontent.com/u/17799537/objFileLoader/Bane/", "Bane_3.obj"); var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "Bane_3.obj"); bane.onSuccess = pos; loader.onFinish = function() { engine.runRenderLoop(function () { scene.render(); }); }; loader.load(); return scene; }; // End of createScene function // Now, call the createScene function that you just finished creating var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html> How to load an OBJ file from a web server correctly? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 24, 2016 Share Posted March 24, 2016 Hello this sounds like an issue with MIME type. Just try to add .obj and .mtl support in your web server wind 1 Quote Link to comment Share on other sites More sharing options...
wind Posted March 27, 2016 Share Posted March 27, 2016 On 3/24/2016 at 9:19 PM, Deltakosh said: Hello this sounds like an issue with MIME type. Just try to add .obj and .mtl support in your web server @Deltakosh : Thanks, it works... I can see the model, but I cannot see the textures, even though I have collected the textures in the same folder. I have tried to assign a texture to all models, but I still cannot see the texture. Here is my code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="babylon.js"></script> <script src="hand.js"></script> <script src="cannon.js"></script> <!-- optional physics engine --> <script src="oimo.js"></script> <script src="babylon.objFileLoader.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script> // Get the canvas element from our HTML above var canvas = document.getElementById("renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // This begins the creation of a function that we will 'call' just after it's built var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 10, 0), scene); light.intensity = 1; var cam = new BABYLON.ArcRotateCamera("ArcRotateCamera", 0, 0, 5, new BABYLON.Vector3(0, 3, 0), scene); cam.attachControl(canvas); var loader = new BABYLON.AssetsManager(scene); var position = -5; var pos = function(t) { t.loadedMeshes.forEach(function(m) { //m.position.x -= position; m.position = new BABYLON.Vector3(0, 0, 0); m.material = new BABYLON.StandardMaterial("mat", scene); m.material.diffuseTexture = new BABYLON.Texture("/assets/Control_Panel.jpg", scene); }); position += 5; }; //var bane = loader.addMeshTask("bane", "", "https://dl.dropboxusercontent.com/u/17799537/objFileLoader/Bane/", "Bane_3.obj"); //var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "Bane_3.obj"); var bane = loader.addMeshTask("bane", "", "assets/", "TestMultipleObjects.obj"); //var bane = loader.addMeshTask("bane", "", "http://bayu.net23.net/objFileLoader/", "TestMultipleObjects.obj"); bane.onSuccess = pos; loader.onFinish = function() { engine.runRenderLoop(function () { scene.render(); }); }; loader.load(); return scene; }; // End of createScene function // Now, call the createScene function that you just finished creating var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html> Do you know how to show the textures? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 27, 2016 Share Posted March 27, 2016 Hey! some ideas: did you enable support for .mtl as well?? Any error in the console? Quote Link to comment Share on other sites More sharing options...
wind Posted March 28, 2016 Share Posted March 28, 2016 10 hours ago, Deltakosh said: Hey! some ideas: did you enable support for .mtl as well?? Any error in the console? Hi, apparently the textures didn't appear because I used wrong .htaccess... Now I can see the textures. There is another problem, the mesh looks hard (please see the attached picture). It is not like this in 3ds Max. Is there any method in Babylon JS to soften the mesh? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 28, 2016 Share Posted March 28, 2016 There is an option in 3dsmax (on scene babylonjs properties) to turn vertices optimiation off wind 1 Quote Link to comment Share on other sites More sharing options...
wind Posted March 29, 2016 Share Posted March 29, 2016 10 hours ago, Deltakosh said: There is an option in 3dsmax (on scene babylonjs properties) to turn vertices optimiation off OK thanks Quote Link to comment Share on other sites More sharing options...
Vousk-prod. Posted December 2, 2016 Share Posted December 2, 2016 Hmm, now we removed all .js files from repo, how people will be able to get and load the babylon.objFileLoader.js in their HTML page (as described in the doc http://doc.babylonjs.com/extensions/OBJ ) ? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted December 2, 2016 Share Posted December 2, 2016 https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview release/loaders Quote Link to comment Share on other sites More sharing options...
Vousk-prod. Posted December 4, 2016 Share Posted December 4, 2016 Oh, didn't notice this new folder. I've just sent a PR to update doc (sorry, didn't manage to create only one PR on github with the 2 changes at once) GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.