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

Mira · May 14, 2014

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

Dad72 · May 14, 2014

Hi,

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

Welcome

Mira · May 14, 2014

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>

gryff · May 14, 2014

Mira, try loading the .babylon scene first then within the newScene.executeWhenReady(function () {.... }); add the skybox, terrain and water plane.

cheers, gryff

Dad72 · May 14, 2014

Do you have a link to your page to look more loan your complete code.

Thanks

Mira · May 14, 2014

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

https://www.dropbox.com/s/b081pujtwmgzjba/loadscene.rar

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

https://www.dropbox.com/s/y8scnbrhl61bf1g/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-05-15%2002.52.11.png

gryff · May 14, 2014

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

scene.activeCamera.attachControl(canvas);

// 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() {

scene.render();

});

}, function (progress) {

// To do: give progress feedback to user

});

}

gryff · May 14, 2014

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

Dad72 · May 14, 2014

He had a lot of error. I've corrected your scene to make it work.

You can download it here:

~~loadscene.zip~~

Mira · May 15, 2014

Dad72, thank you a lot! Its works!

Dad72 · May 15, 2014

Cool. Good luck Mira

Mira · May 16, 2014

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?

gwenael · May 16, 2014

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

Mira · May 17, 2014

gwenael, can it works like this?

BABYLON.SceneLoader.Load("mesh/", "5.babylon", engine, function (newScene) {

BABYLON.SceneLoader.ImportMesh("", "mesh/dush/", "dush.babylon", scene, function (newMeshes) {

newMeshes[0].position = BABYLON.Vector3.Zero();

});

gwenael · May 17, 2014

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 May 17, 2014 by gwenael

Mira · May 21, 2014

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?

Temechon · May 21, 2014

If your materials have the same name in Blender, then in Babylon texture will be mixed.

Be sure you give a different name to all your materials in blender, then export again your 3D scene and models.

Cheers,

Wingnut · May 22, 2014

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);

and/or...

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);

etc.

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.

Mira · May 24, 2014

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

Dad72 · May 24, 2014

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.

Mira · May 28, 2014

I tryed to change names of the textures in Blender but it still like this

https://www.dropbox.com/s/8y27ygt9um2037q/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-05-28%2017.11.28.png

What kind of problem it may be?

Wingnut · May 28, 2014

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.

Mira · May 28, 2014

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

gryff · May 28, 2014

Hi Mira, Wingnut has asked me to help, so I have download your 1k.rar file - I will take a look at it over the next few hours and report back.

cheers, gryff

gryff · May 28, 2014

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

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

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

JCPalmer

Dad72

Wingnut

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members