Help with cloning

Hello!!

Ive been tinkering with various codes using different meshes and saw this PG:

https://www.babylonjs-playground.com/#AXFX8F#0

How to make more boxes based off this code? This is a great start rather than the planes meshes i tried to use before. I want 4 rows of 4 box meshes. How do I add more boxes to this code please?

:heart: :heart:,
Mekaboo

Hi Mekaboo, may be I am wrong but I think you need some basics about the coordinate system in common. Here is a video about the “cartesian coordinate system”. It is explained for two dimensions. The third coordinate is the z.

In the code you will see the coordinates here for example:
boxClone.position.x = -2;

If you want to add a new mesh simply copy a line which creates a mesh and give it a unique name:
var myNewBoxClone = box.clone(“my_new_box_name”);

and set the position so that it will not overlap to the other meshes otherwise you would see only one mesh or a “strange” merged mesh
myNewBoxClone.position.x = -5;

hope this helps

1 Like

Sorry @Mekaboo but I have a real problem knowing what you do not understand.

The playground you reference clearly shows two ways of making a copy of a created box and of positioning them.

The methods are

You start with a single box creation

var box = BABYLON.MeshBuilder.CreateBox("box_bottom_right", { size: 2 });

This shows you how to clone a box (you can apply any material to each clone)

var boxClone = box.clone("boxClone");

This shows you how to create an instance (cannot vary material of an instance)

var boxInstance = box.createInstance("boxInstance");

This shows you can re-position the boxes

box.position.x = 2;
boxClone.position.x = -2;
boxInstance.position.y = 3;

You can of course make as many clones (or instances) as you wish.

var box1 = box.clone("box1");
var box2 = box.clone("box2");
var box3 = box.clone("box3");
var box4 = box.clone("box4");

and then position them where you want.

Please create a simple playground using box.clone and position the boxes where you want and then describe the issues you are still having.

2 Likes

Thanks for sharing!!!

Thank ya and will do :blush:

Sir @JohnK here is the PG I made:

Babylon.js Playground

I used your input but only come up with 3 boxes in the row. How can I get one more box on that row and then make clones of the row(3 more rows will be great)? Also shorten the height and width.

Hi Mekaboo, I think you need more fundamentals about programming before you dig into babylon. Do you know what a for loop is?

https://learnxinyminutes.com/docs/javascript/

3 Likes

Agree with @Necips about learning Javascript it is a prerequisite for using Babylon.js and you can read through the Babylon.js docs to help with thing like positioning.

This page will help you position your boxes Position and Rotation - Babylon.js Documentation as your playground shows that you did not position box1, box2 etc

https://playground.babylonjs.com/#TK8KGR#1

This page will help you put a playground into your own project First Steps - Babylon.js Documentation

FreeCodeCamp is another place to learn Javascript

1 Like

Sirs @Necips & @JohnK I will look into this more. I mostly work with basic HTML, PHP, CSS using frameworks such as Bootstrap to build sites. Ive dabbled in this before but not alot so Im still learning. Thank ya both for ya help :relaxed:

I see in the tutorial of the "for loop"which basically causes a repeat :+1: