solved About the script positioning issue

[Buzul]

Hello to everyone;

Thank you so much for your help so far ..

Now I have a different problem.

 

I have babylon files and i'm importing those files to my scene with import mesh technic, and also i have java script file for some functions for using in those files.

I can run one babylon file with one js file with together; but when i want use multiple babylon files and multiple javascript files.

For example for first babylon file will be cordinates in x,y,z and js file shult be work with it and same coordinates.

How i can solve this issue. If you have got any oppinion about this please let me know.

Thanks in advance..

[JohnK]

Not very sure about what you need do these help?

https://www.babylonjs-playground.com/#YGUADW%2311

https://www.babylonjs-playground.com/#YGUADW#8

They are here

as a solution to the problem of that topic.

[Buzul]

Hi John;

Thanks your reply and your samples.

You will find a scene in atteachment file, you can think this scene like a room and will be multiple rooms from like this rooms in biggest room; and also i added some js codes to this file for click events.

My issue  is when i put multiple rooms to inside of the biggest room i have to create special js codes each rooms (i know this). But how can i put to coorect coordinates those codes i don't know.

I can position the "bob.babylon" file that I took on the stage with the import mesh method. I want to keep the codes I added for click events in a separate file and move them together with the room when the room position is changed.

Thanks for your sharing

issue_sample.rar

[JohnK]

Sorry but personally only look at Playground examples. Are you asking something along the lines of

I have two Babylon scenes, scene A and scene B. For scene A I have created code A which are click events for scene A. In the same way for scene B I have created code B which are click events for scene B. Scene A and code A are different to scene B and code B. Is there a way I can export code A along with scene A and also separately code B with scene B so that having done this I would like to set up a single project where I can import scene A and scene B and for the appropriate click events to work in the correct scene?

 

[Buzul]

Hi John.. Thanks for your reply..

if you've examined the example, let me explain

You can think of this as a room. Within a larger area (again babylon js scene) there are dozens of this sample

If i put to the origin point scene and codes it's working fine but when i put scene to special coordinate how can organize codes i dont know

is there any way we can think of scenes and codes together as a whole object and place them together in a coordinate?

[Buzul]

Hi again;

I'm adding my script codes, may be somebody can see samething..

I'm trying to do when i import multiple scene to different locations run to those codes that coordinates.

Another approaching: For example please think a space (biggest one) i'm importing this scene different locations in this space. My codes are in the small space (small space is each scene). I'm trying to do carry my codes to related coordinates each scene.

How can i to do this i'm trying to find a solution.

Any idea can help me.. Thanks advance...

var canvas = document.getElementById("renderCanvas");
        
        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
            var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
            var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(250, 100, 0), scene);

            // This attaches the camera to the canvas
            camera.attachControl(canvas, true);

            // Camera Key Controll
            camera.speed=15; // Speed
            camera.keysUp.push(87); // W
            camera.keysDown.push(83); // S
            camera.keysLeft.push(65); // A
            camera.keysRight.push(68); // D

		
            BABYLON.SceneLoader.ImportMesh("", "./", "bob.babylon", scene, function (newMeshes2) { //bringing babylon file
                hall = newMeshes2[1];
                hall.rotation.y = 0;
                hall.position = new BABYLON.Vector3(0, 0, 0)
			
            });		

/////////////////// trying to import from external file and carry this block (start) //////////
            var optionsBro = { //cube size 1
                width: 18,
                height: 18,
                depth: 18,
            };

            var box = BABYLON.MeshBuilder.CreateBox('box', optionsBro, scene);
            var mate = new BABYLON.StandardMaterial("Mat",scene);
            box.position.x = 25;
            box.position.y = 10;
            box.position.z = -35;
            mate.alpha=0;
            box.material=mate;

            //click event for cube 1
            box.actionManager = new BABYLON.ActionManager(scene);
            box.actionManager.registerAction(
                new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
                function (event) {
                    var pickedMesh=event.meshUnderPointer;
                    alert("this is cube");
                    }))

            var optionsBro2 = { //cube size 2
                width: 18,
                height: 18,
                depth: 18,
            };

            var box = BABYLON.MeshBuilder.CreateBox('box', optionsBro2, scene);
            var mate2 = new BABYLON.StandardMaterial("Mat",scene);
            box.position.x = 5;
            box.position.y = 10;
            box.position.z = -5;
            mate2.alpha=0;
            box.material=mate2;

            //click event for cube 2
            box.actionManager = new BABYLON.ActionManager(scene);
            box.actionManager.registerAction(
                new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
                function (event) {
                    var pickedMesh=event.meshUnderPointer;
                    alert("this is teapod");
                    }))
////////////////////////////////// finish ///////////////////////////////

            return scene;
        };
        
        var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
        var scene = createScene();

        engine.runRenderLoop(function () {
            if (scene) {
                scene.render();
            }
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });

 

[Wingnut]

Hi guys.  This sort-of sounds like a PARENT issue.

Let's pretend many tents... erected in a large field.

Each tent has things inside it... and some things nearby it (outside).

ALL these inside-the-tent and nearby-outside-the-tent mesh/models/lights... could be parented to the tent... "tent1", and then another "sub-scene" for tent2, and tent3.

THEN, all positions/rotations/scalings for tent-parented inside/outside tent items... will be "bound" to the tent's position, rotation, and scaling.

In other words, move/scale/rotate the parent tent, and all children will move/scale/rotate "proportionally".

And, later, if you want to move the hatchet closer to the tent, or rotate it, or scale it, it will be easy... and will stay near the group-parent.

Parents... don't have to be a tent.  They can be a small plane/box with .visibility = 0;  You might name this invisible parent "group1parent" or "group14parent", etc.

These "sub-scenes" could be called "families", because of the parent/child relationship.

Then, you don't need to separate your JS into separate files or sections.  If you want, you can store your "families" in arrays like...

var family3pile = [scene.getMeshByName('family3parent'), scene.getMeshByName('hatchet'), scene.getMeshByName('campfire'), etc, etc ];

(in fact, I think there is a mesh.getChildren() nearby that will help build your family "piles".  (storage tanks?) 

See how you are starting to build your own database of families, all within one JS scene? 

You can create the family array so that the family-parent is always in the [0th] element of the familyPile array  (head of the family). 

So, family3pile[0].position = new BABYLON.Vector3(x,y,z) will move an entire tent/family to a new worldspace location, but all the children will still remain inside/nearby the tent/parent.  Easy, eh?

Just some ideas.  I know you are trying to think modularly...  where code must travel WITH the family group.  But that is not necessary.  Being able to quickly/easily "look-up" a family/parent from your database-o-families... is what you seek.  One array could be var town = [];  Fill that with family arrays... which are filled with family members (children).

town.family.tent.hatchet?  heh.  You sort of need a "townManager" or "familyManager" object/system.    Not separate JS.  Instead, one JS that handles/looks-up ANY number of parent/child groups (sub-scenes)... from Buzul's array of arrays  (the town tank). 

Later, you can build a "country tank", to hold many town-tanks... each full of family tanks.  (tanks = arrays = storage tanks) 

[Buzul]

@Wingnut Thanks for your guide.. I will take a look what can i do with parent-child mentality. I will let you know about result.

 

Thanks for your support

[JohnK]

Have turned you code into a playground https://www.babylonjs-playground.com/#RL7EYP#1 can you describe in terms of the logo_cube, the red cube and the blue cube what you want to ?

Here are some other PGs perhaps one or both of them will make it easier for you to explain what you need.

https://www.babylonjs-playground.com/#RL7EYP#2

https://www.babylonjs-playground.com/#RL7EYP#3

 

 

[Buzul]

Hi John;

Thanks for your valuable solution suggestions. I think my issue will be solved with @Wingnut 's way. Because him's story is similar with my situation. I simulated somethings yesterday with that way. I will try to entegrate this solution to my main project today.

[Buzul]

Hi everyone again me..

I solved that  issue with parent mentality. Thank for idea and helps to @Wingnut

But i have one mode issue..

If my all codes are inside of the index.html, working fine... But i need to use with seperate js files; and issue point is: When i want to import index js (I have index.html, fist.js,second.js) crating error message of "Unable to import meshes from xxxxxx.babylon: Error in onSuccess callback".

There is a topic with this error in the forum, I saw it but i couldn't solve it.

is there any suggestion?

[Guest]

can you share your code online so we can see the error? Also you can just set a breakpoint inside your loading callback to see what is wrong

[Buzul]

Hi @Deltakosh thanks for your reply..

My codes ar in PG now

https://www.babylonjs-playground.com/#82XMQB

If i use those codes in html directly no problem. But i have to use from separate files like first.js, second.js etc..

In this time babylon giving "BJS - [13:09:59]: Unable to import meshes from Hall/small_hall.babylon: Error in onSuccess callback babylon.js:1:106826" error message

how can i fix this issue i don't know.. I'm out of ideas

I need your helps about this issue, thanks in advance

[Buzul]

2 hours ago, Buzul said:

Hi @Deltakosh thanks for your reply..

My codes ar in PG now

https://www.babylonjs-playground.com/#82XMQB

If i use those codes in html directly no problem. But i have to use from separate files like first.js, second.js etc..

In this time babylon giving "BJS - [13:09:59]: Unable to import meshes from Hall/small_hall.babylon: Error in onSuccess callback babylon.js:1:106826" error message

how can i fix this issue i don't know.. I'm out of ideas

I need your helps about this issue, thanks in advance

Hi everyone.. I have solved my problem with global veriable. I separated all files, it's working fine.. I accept more effective solutions if somebody have. Thanks for all supports..

[Wingnut]

Hey, that's good news, B!  Keep on truckin'.  Here's some demos and tests that might help...

https://www.babylonjs-playground.com/#82XMQB#2

I turned-off a bunch of not-needed-til-later code... changed cam to orbit, made it aim +z, then added 2 .babylon files that were published nearby.

Note to others:  I have been PM'ing with Buzul a bit, and I suspect that he/she wants to import a few .babylon files... and make sure he/she has a "box parent" on all the imported models.

 

My two .babylon files might already have a "root" in newMeshes[0] that I can move/rotate/scale (and the entire model does it, too)... but... I still made two "parental boxes".

Errors inside-of loader onsuccess blocks... are not always easy to find.  That is why I told you to "wrap" your onsuccess code in a try/catch.... the "extra error checker".

But I didn't use a try/catch, here.  I also turned-off the actionManager-adding.  THAT is where the hard-to-find error might be located.  But let's talk about adding actionManagers a bit later.

For now, notice that you can set .position, .rotation, and/or .scaling on stand1parent, and stand1 model (currently a rabbit) does the same.

Also notice that you can set .position, .rotation, and/or .scaling on hallparent, and hall model (currently a paddle) does the same.

Here's proof...

https://www.babylonjs-playground.com/#82XMQB#3

In lines 105-116,  I am sin/cosine-animating stand1parent and hallparent positions.  Stand1 and hall... travel WITH their box parents.

We just needed to make your code a bit simpler/cleaner... and make sure we are working on ONE issue at a time.  After you are happy with the parenting issue, we can turn on the actionManager(s) again (on the mesh, not the box parents), I think.

But maybe you want to use drag'n'drop to drag-position the hall and stand1 and other models.  Then, yeah, we put the actionManagers on the box parents.  We'll talk more. 

I want to hear your thoughts on the parenting, so far.

Just for fun, let's try animating (moving) the two models... without using parent-boxes.

https://www.babylonjs-playground.com/#82XMQB#4

(see changes to 105-116 code).  Seems to work, without parent boxes... as long as all the sub-parts of the models... are parented to newMeshes[0] in both models.  In other words, we can position, rotate, and scale newMeshes[0]... (stand1 and hall)... without needing parent boxes.  But parent boxes are cool, too.  Thoughts?  Shall we try nesting a 3rd SceneLoader?  Ok...

https://www.babylonjs-playground.com/#82XMQB#6

Wow!  Works!  You can ignore the manifest errors seen on the f12 console.  That's just a bit of heartburn. 

PS:  If anyone is bored, I think Buzul would be interested in seeing the same triple loader... done with the BJS AssetsManager.  Just my theory.  Maybe Buzul wants to try that himself/herself, though, I dunno.  *shrug*  Here's a playground search for 'assetsManager'... should give plenty of examples, and don't forget the AssetsManager docs.  The SceneLoader is SO 2014, eh?  :D

[Buzul]

@Wingnut thanks again i'll try carry my project to assestManager i'll try it write here..

[JohnK]

For information when writing a playground code about the engine is not required as the playground supplies this in the background. So in your playground https://www.babylonjs-playground.com/#82XMQB

 lines 93 to 105 can be deleted.

If you want to use external assets in the playground then any site hosting your assets must be CORS compliant and use the secure https protocol. For example, IMGUR can be used for textures and for Javascript and model files you could use Github with a link generated by the RawGit site to ensure correct MIME type. However it is better, if possible, to isolate and present issues in a simplified and more focused form using basic meshes and existing textures and models. Doing this will lead to quicker answers as your question will be more understandable, since few people want to work through long sections of code. Using the existing assets will also ensure that they remain reachable and the playgrounds you create will still be a useful resource in the future.

Still want to use external assets, here are some playgrounds to give you ways of doing so.

https://www.babylonjs-playground.com/#TH16ID#1

https://www.babylonjs-playground.com/#TH16ID

https://www.babylonjs-playground.com/#WF3VKZ

 

[Buzul]

 @JohnK Thanks for your information..