How to load object and clone it all over the scene

Questions
1

Hello everyone!

I need to load an object “prototype” meshs and clone them dynamicly all over the scene according to a certain algorithm.
Let’s imagine that one of them is the cars that I want to line up 20.
Here’s what I get

        var canvas = document.getElementById('canvas');
        engine = new BABYLON.Engine(canvas, true);
        scene = _createScene();
        assetsManager = new BABYLON.AssetsManager(scene);
        // Load car model, lets's call it "prototype"
        var meshTask = assetsManager.addMeshTask('loadCar', '', '/Content/', 'car.glb');   
        var carTmp;
        meshTask.onSuccess = function (task) {
            carTmp = task.loadedMeshes[0];
        }
        assetsManager.onFinish = function () {
            // Arrange the cars on the scene
            for (var i = -10; i < 10; i++) {
                var carNew = carTmp.clone("car" + i);
                carNew.position = new BABYLON.Vector3(0, 0, i * 6);
            }

            // Delete carTmp...?

            engine.runRenderLoop(function () {
                scene.render();
            });
        };
        assetsManager.load();

This is certainly not optimal :frowning:
As far as I understand, I shoild use the AssetContainer some way.
What are the best practics for this?

2

Hey @r00xus

There are several different ways to go about “cloning” a mesh to use across your scene.

Here are 3 different techniques you can explore:

  1. Clones | Babylon.js Documentation

  2. Fun with Legos Part 1: Thin Instances - YouTube

  3. Interactive Hex Tiles: Part 1 - Using Asset Containers - YouTube

2 Likes
4

Hi @PirateJC!

Your YouTube videos are awesome and inspire to learn the engine!

Let me explain what I am trying to do in more detail. I made a prototype of the application using the playground

https://playground.babylonjs.com/#UEZMTP#25

There are such assets as a car and a track that the application loads so that later using them as templates to build a scheme of railway tracks in accordance with the JSON file of each scheme.

I put the car and track templates in the “templates” assets container. During the construction of the schema itself, I also put clones of templates in the “schema” assets container, so that it is more convenient to remove them when loading another schema using BABYLON.AssetContainer.dispose() method.

Here’s what goes wrong.
After loading all the templates, I call the method BABYLON.AssetContainer.removeAllFromScene in order not to show them on stage at all. And yes. They don’t really show up in the scene inspector window.
But they stay in camera viewport!

Please tell me what I’m doing wrong :frowning:

1 Like
5

@Evgeni_Popov might be able to have a look as I agree it sounds weird they are staying in.

6

Hello again!

It looks like problems arise only if you use *.glb files.
As soon as I changed the file format of the models to *.babylon everything worked as expected

https://playground.babylonjs.com/#UEZMTP#26

7

Your problem comes from:

var mesh = task.loadedMeshes[0];
templates.meshes.push(mesh);

There are multiple meshes in your .glb files, so you must push them all:

templates.meshes.push(...task.loadedMeshes);

It works with the .babylon file because each file has only a single mesh.

3 Likes
8

@Evgeni_Popov Thank you very much for your reply!

And the last question: is my approach optimal or are there some better solutions?

9

That seems fine to me!

1 Like