Jump to content

load mulpitle objects .babylon to scene with heightmap, skybox etc


Recommended Posts

Hi everyone :)


I have a problem with loading .babylon objects into my scene.

I create a landscape, sky and water at my page and now I need to load some objects into scene like buldings and another things.


I have .babylon file podused with Blender, but when I try use BABYLON.SceneLoader.Load(), I can see only me blender scene after rendering and I mean what I can see just only bulding at black  background, no landscape, no sky.

When I try to use ImportMeshes, I can see only scene with landscape etc without object.


I dont understand where is problem 


Link to comment
Share on other sites



This works: 

var container = document.getElementById('your_canvas');var engine, scene, camera, modele;function init(){ engine = new BABYLON.Engine(container, true);scene = new BABYLON.Scene(engine); BABYLON.SceneLoader.ImportMesh("YouName", "path/", "file.babylon", scene, function (newMeshes, particleSystems, skeletons){modele = newMeshes[0]; modele.rotation.y = 0;modele.position = new BABYLON.Vector3.Zero;}); camera = new BABYLON.ArcRotateCamera("Camera", Math.PI/2, Math.PI/2, 120, new BABYLON.Vector3(0, 35, 0), scene);scene.activeCamera.attachControl(container);var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 2, 0), scene);light.diffuse = new BABYLON.Color3(1, 1, 1);light.specular = new BABYLON.Color3(1, 1, 1);light.groundColor = new BABYLON.Color3(0, 0, 0);engine.runRenderLoop(function() {scene.render();});window.addEventListener("resize", function () { engine.resize(); }); // Resize engine }init();
Edit the code to run correctly


Link to comment
Share on other sites

Thanks Dad72!


I use it like this and see just whitescreen 

Im a really new in Babylon  :)

<body><canvas id="renderCanvas"></canvas><script>        if (BABYLON.Engine.isSupported()) {            var container = document.getElementById(renderCanvas);            var engine, scene, camera, modele;    function init()    {    engine = new BABYLON.Engine(container, true);    scene = new BABYLON.Scene(engine);    BABYLON.SceneLoader.ImportMesh("Dom", "", "5.babylon", scene, function (newMeshes, particleSystems, skeletons)    {        modele = newMeshes[0];        modele.rotation.y = 0;        modele.position = new BABYLON.Vector3.Zero;        });    camera = new BABYLON.ArcRotateCamera("Camera", Math.PI/2, Math.PI/2, 120, new BABYLON.Vector3(0, 35, 0), scene);    scene.activeCamera.attachControl(container);    var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 2, 0), scene);    light.diffuse = new BABYLON.Color3(1, 1, 1);    light.specular = new BABYLON.Color3(1, 1, 1);    light.groundColor = new BABYLON.Color3(0, 0, 0);    engine.runRenderLoop(function() {    scene.render();    });    window.addEventListener("resize", function () { engine.resize(); }); // Resize engine    }    init();}</script></body>
Link to comment
Share on other sites

Dad72, I use localhost on Apache , so I dont have a link




Here is archive with  original code, how I did it before writing to this framework.



Here - https://www.dropbox.com/s/hcfyletr6d4gj7m/importmeshes.rar how I try to use your code



Gryff, I try addin description of skybox  to ExecuteFunction, like

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Test</title><script src="./hand.minified-1.3.7"></script><script src="./babylon.1.11.0.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);var scene = new BABYLON.Scene(engine)            BABYLON.SceneLoader.Load("", "5.babylon", engine, function (scene) {                scene.executeWhenReady(function () {// Skybox    var skybox = BABYLON.Mesh.CreateBox("skyBox", 1800.0, scene);    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);    skyboxMaterial.backFaceCulling = false;    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/night", scene);    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);    skybox.material = skyboxMaterial;                    // Attach camera to canvas inputs                    scene.activeCamera.attachControl(canvas);// Once the scene is loaded, just register a render loop to render it                    engine.runRenderLoop(function() {                        scene.render();                    });                });            }, function (progress) {                // To do: give progress feedback to user            });}    </script></body></html>

and I get just my object at black backgroung again  :)  meanwhile,  in console I can see what all skybox textures have been loaded



Link to comment
Share on other sites

if (BABYLON.Engine.isSupported()) {

var canvas = document.getElementById("renderCanvas");

var engine = new BABYLON.Engine(canvas, true);

// change this line

var myScene = new BABYLON.Scene(engine)

BABYLON.SceneLoader.Load("", "5.babylon", engine, function (scene) {

scene.executeWhenReady(function () {

// Attach camera to canvas inputs - move this line


// add this line

myScene = scene;

// Skybox now your skybox stuff

var skybox = BABYLON.Mesh.CreateBox("skyBox", 1800.0, myScene);

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", myScene);

skyboxMaterial.backFaceCulling = false;

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/night", myScene);

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);

skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

skybox.material = skyboxMaterial;

// Once the scene is loaded, just register a render loop to render it

engine.runRenderLoop(function() {




}, function (progress) {

// To do: give progress feedback to user



Link to comment
Share on other sites

Try the code, which I have edited, above Mira. Sorry for this double post but my mouse is on drugs ;-)


The code adds a line and moves some stuff. I tried it out on my computer - works fine


A.babylon file of mine with a skybox loaded using the above code changes.


cheers, gryff :)


Link to comment
Share on other sites

Hello to everyone  :)  I need your help again. Now I want to  add a few meshes into a scene, but each object individually, so I could  access to each object and use some function for it.  Like moving from one bulding to another.


If I load a full scene with a BABYLON.SceneLoader.Load() can I get access to an each object into my scene?

Link to comment
Share on other sites

If it's to create a new scene:

BABYLON.SceneLoader.Load(rootUrl, sceneFilename, engine, function(scene) {    var meshes = scene.meshes;    for(var index = 0; index < meshes.length; index++) {        var mesh = meshes[index];        // do what you want with mesh    }});

otherwise you can import meshes into existing scene like Deltakosh explains it here http://www.html5gamedevs.com/topic/6492-change-position-on-blender-imported-mesh/?p=38661

Link to comment
Share on other sites

If you replace 'scene' by 'newScene', yes it should work at the condition your paths to your files are correct.

// load a new entire scene from "mesh/5.babylon"BABYLON.SceneLoader.Load("mesh/", "5.babylon", engine, function (newScene) {    // once the scene is loaded, import new meshes into it, all from "mesh/dush/dush.babylon"    BABYLON.SceneLoader.ImportMesh("", "mesh/dush/", "dush.babylon", newScene, function (newMeshes) {        newMeshes[0].position = BABYLON.Vector3.Zero();			    }});

Be careful, you forgot a '}'.

Edited by gwenael
Link to comment
Share on other sites

thank you, guys for your kind assistanse ! :)

now I have one more problem

when I import mesh into a my scene, use

BABYLON.SceneLoader.Load("mesh/", "5.babylon", engine, function (newScene) {					BABYLON.SceneLoader.ImportMesh("", "mesh/dush/", "dush.babylon", newScene, function (newMeshes) {			//newMeshes[0].position = BABYLON.Vector3.Zero();			newMeshes[0].position = new BABYLON.Vector3(0.3571,0.3544,-0.1527);                    			});			scene = newScene;

I have a next one situation https://www.dropbox.com/s/zjl89sck04o0069/1.jpg

So textures from my first model have been used for texturing another one.

All models in separate folders. What is the problem?

Link to comment
Share on other sites

Hi Mira!  Welcome to the forum... looks like you are becoming an expert at babylon.js very quickly.  You asked:  "so I could access (to) each object and use some function for it".  I wanted to tell you YES.  Every mesh, light, camera, and texture... that was imported (scene loaded)... you can have access-to... with simple javascript.  The main thing is that you must first FIND the wanted scene item (mesh, light, camera, etc).  That is often called "getting a reference to it" or "getting a handle on it".


Take a look at http://doc.babylonjs.com/page.php?p=24646.  Scroll down a ways.  There are many methods on the scene... that start with "get".  Almost all of them... are ways to "get" a reference or "handle" to an object in your scene.  One of the most-often used... is scene.getMeshByName("some name").  Another is .getCameraByName and .getCameraByID, and .getLightByID... all are very handy ways to get handles on/to your imported/loaded scene items.


var mymesh = scene.getMeshByName("some_mesh_name");

alert (mymesh);


It should say "object" if your getMesh command was successful.  You can also do...


alert (mymesh.name);




alert (mymesh.Id);



Once you have done a successful mesh 'get'... you can start having fun with it:


mymesh.position.x = 10;

mymesh.rotation.y = .707;

mymesh.material.diffuseColor = new BABYLON.Color3(1, 0.2, 0);

mymesh.material.diffuseTexture = new BABYLON.Texture("mytextures/grass.png", scene);




A common quick way to do a simple animated rotation on a mesh... is to put a line like this... inside the scene's render loop...


scene.getMeshByName("meshname").rotation.y += .01;


(I hope I have that correct.  Its late, I'm sleepy)  :)  This spins the mesh .01 radians around the Y axis... once per frame.  There are other (maybe better) ways, but this is a quick and easy way to get you rolling with basic animation.


It will take you some time to figure out what to do with your meshes, lights, and cameras, after a scene load. Sometimes you will put some HTML buttons on the top of your screen, and when they are clicked, you will run a JS function. Sometimes you will addEventListener to the keyboard, and run a function when a key is pressed.  Sometimes you will use babylon.js "picking" to click on objects, and run a function.  And sometimes you will use function calls inside the renderloop, or use babylon's .registerBeforeRender(somefunction)... for continuous animations (often incrementing or decrementing a mesh, light, or camera value once per rendered frame).


Be sure to read our tutorials, and also consider downloading the many zips available in The Wingnut Chronicles topic.  Look at the code... see how others do things.  There is really no limits at all.... but it takes a little time to become an expert (but not very much time, really).  Feel free to ask questions, of course. 


I mainly wanted to tell you that EVERY scene item that you import/load... can be adjusted, animated, enabled/disabled, made invisible/visible, deleted, have physics activated, made pick-able, you name it.  ANYTHING is possible on ANY imported scene item... once you 'get' a 'handle' (reference) to it... using the many 'get' methods on the scene object.  Good luck!  See you around... here in the forum.  Tell us about your experiments... we love to hear about them.

Link to comment
Share on other sites

Wingnu, thank you so much for this answer! 

I try to change names of textures in blender but it doesn't help, my another mesh still textured by pictures of furst mesh, I can't understund what is problem. Someone have the same problem? How you solved it?


And one more question - I need to put some models in one scene, how I can to calculate the location of objects relative to each other? Now I use 

newMeshes[0].position = new BABYLON.Vector3(0.3571,0.3544,-0.1527);

I need calculate coordinates for all object? May be exist some algorithms for it? I think I can get all object in one scene in Blender and export to Babylon one object retaining the object's location. Is it right? 


Im sorry for so much questions but I really want to understand how  Babylon works and do something intrestingwith it :)

Link to comment
Share on other sites

 I think I can get all object in one scene in Blender and export to Babylon one object retaining the object's location. Is it right? 


Yes you should do like this I think, what should be the simplest.  ;)


Don't be sorry for your questions, the forum is there for that. and if we can help, we help with pleasure.  :)

Link to comment
Share on other sites

Mira, as you know, I have asked Gryff via PM... to help us.  I also tried a sceneLoad from my friend's webserver, and I got a JSON PARSE error... unexpected keyword.  I am not very experienced with Blender-to-babylon.


You sent me the link to a .rar file that contained all your files.  There are other exporting experts besides Gryff nearby.  Would you be willing to tell everyone...  the URL to your .rar file?  If so, maybe other Blender, exporter, and loadScene experts will help find the problem.

Link to comment
Share on other sites

Wingnut, okay, thank you for all.

I try to load another files and its work normal, but I have problems with texturing and position of objects.

Here is files with all objects which I try to load - https://www.dropbox.com/s/b081pujtwmgzjba/loadscene.rar



But when I try load another object, like this one - https://www.dropbox.com/s/zhfzrs65ft9llt9/1k.rar, I have errors about  Wingnut say. I change exporter Blender-to-Babylon, but it still not okay

Link to comment
Share on other sites

Hi mira - I took a look at your 1K blend file - and to be honest the mesh is not great.


It has at least 46 vertices, and possibly more, that do not define faces - I have no idea how babylon.js will handle those (picture1 below - note red box).


In addition, there are lots of small areas (2-4 faces) that are not connected except by materials. When I remove double vertices 717 vertices get deleted.


The second pic below is viewing that file by itself loaded into a scene. The model has those isolated vertices removed and it is loading BUT ... it crashes my browser within seconds.


I will investigate further later tonight.


cheers, gryff :)



Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...