hit2501 Posted December 27, 2014 Share Posted December 27, 2014 Hi everyone, I've been using the exporter for 3ds max to babylon to export simple models to viewing on html, everything works fine (with textures and all) but now I want to import a larger and more complex model but I cannot do it because the exporter to babylon has a limit of 65k vertices, I thought to divide the model into several .babylon files. My question is: how can I merge several .babylon files into one html? In this question (with my code to load one .babylon): http://stackoverflow.com/questions/27611416/load-multiple-babylon-files-in-one-html/27628095#27628095David Catuhe told me that it is possible to use instructions "BABYLON.SceneLoader.Append" but I dont know how to use it. I saw also in: http://www.html5gamedevs.com/topic/6436-load-mulpitle-objects-babylon-to-scene-with-heightmap-skybox-etc/page-3?hl=append it is possible to use "append" but not if this requires another version of babylon.js. I am new to babylon but I find quite interesting and would like to learn more. Sorry if something is misspelled, my native language is Spanish. Just in case: Im using the exporter for 3ds max because I cannot run the exporter for Blender (am 32 bits). Thank you very much. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted December 27, 2014 Share Posted December 27, 2014 Hi, The limit of 65k vertices is of WebGL, no exporter or babylon.To upload multiple files you can use SceneLoader.ImportMesh () that chargeras several mesh.You can therefore load a scene with SceneLoader.load then load the other mesh with ImportMesh to complete your scene. Quote Link to comment Share on other sites More sharing options...
hit2501 Posted December 27, 2014 Author Share Posted December 27, 2014 (edited) Thanks dad72 for the quick answer, Can you show me a example load 2 or more meshes?Sorry if its too basci, Im really new with it. My code is:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Using babylon.js - How to load a scene</title><script type="text/javascript" src="./103A_files/hand.js"></script><script type="text/javascript" src="./103A_files/cannon.js"></script><script type="text/javascript" src="./103A_files/babylon.js"></script><style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; } </style> </head> <body><canvas id="renderCanvas"></canvas><script> if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load("", "101A.babylon", engine, function (newScene) { //BABYLON.SceneLoader.Load(options.babylonFolder + "./GrupoBabylon", options.babylonFile, engine, function (newScene) { newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { newScene.render(); }); }); }, function (progress) { // To do: give progress feedback to user }); }</script> Edited December 27, 2014 by hit2501 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted December 27, 2014 Share Posted December 27, 2014 BABYLON.SceneLoader.Load("", "101A.babylon", engine, function (newScene) { BABYLON.SceneLoader.ImportMesh("","other.babylon", newScene, function (newMeshes) { newMeshes.position = new BABYLON.Vector3(10, 0, 6);// position mesh in your scene }); }); Quote Link to comment Share on other sites More sharing options...
hit2501 Posted December 27, 2014 Author Share Posted December 27, 2014 Cool. I will try it and let you know. Can I use it to load 2 or more meshes? Quote Link to comment Share on other sites More sharing options...
Dad72 Posted December 27, 2014 Share Posted December 27, 2014 Yes Quote Link to comment Share on other sites More sharing options...
hit2501 Posted December 27, 2014 Author Share Posted December 27, 2014 Hi I tried and just can see the first babylon file (101A).<!DOCTYPE html><!-- saved from url=(0023)http://localhost:45478/ --><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Like Reality</title> <link rel="stylesheet" href="./101A_files/3DGallery.css" /> <script data-main="101A/101A" src="./101A_files/require.js"></script> <script type="text/javascript" src="./101A_files/cannon.js"></script> <script type="text/javascript" src="./101A_files/babylon.js"></script> <style type="text/css"> html, body, div, canvas { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } </style></head><body> <canvas id="canvas" width="1280" height="632"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load('', '101A.babylon', engine, function (newScene) { BABYLON.SceneLoader.ImportMesh('','bench2.babylon', newScene, function (newMeshes) { newMeshes.position = new BABYLON.Vector3(10, 0, 6);// position mesh in your scene }); newScene.activeCamera.attachControl(canvas); engine.runRenderLoop(function() { newScene.render(); }); window.addEventListener('resize', function () { engine.resize(); }); }); </script></body></html> Quote Link to comment Share on other sites More sharing options...
hit2501 Posted December 27, 2014 Author Share Posted December 27, 2014 I got it working with the following code, I hope it helps someone.Thanks dad72 <!DOCTYPE html> <!-- saved from url=(0023)http://localhost:45478/ --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Like Reality</title> <link rel="stylesheet" href="./101A_files/3DGallery.css" /> <script data-main="101A/101A" src="./101A_files/require.js"></script> <script type="text/javascript" src="./101A_files/cannon.js"></script> <script type="text/javascript" src="./101A_files/babylon.js"></script> <style type="text/css"> html, body, div, canvas { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); //Adding a light var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene); //Adding an Arc Rotate Camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); // The first parameter can be used to specify which mesh to import. Here we import all meshes BABYLON.SceneLoader.ImportMesh("", "101A/", "101A.babylon", scene, function (newMeshes) { // Set the target of the camera to the first imported mesh camera.target = newMeshes[0]; }); // The second .babylon to import. BABYLON.SceneLoader.ImportMesh("", "bench/", "bench2.babylon", scene, function (newMeshes) { // Set the target of the camera to the first imported mesh camera.target = newMeshes[0]; }); // Move the light with the camera scene.registerBeforeRender(function () { light.position = camera.position; }); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html> 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.