background

I should have moved on to how to draw lines, and with our example, how to draw lane lines, how to request map data. But we’ve been talking about elements. I’m going to move on to the operation of elements.

The body of the

MergeMeshes

Composite base object

So this is the car that we did in the last video, and we draw two cylinders as wheels.

var mat2 = new BABYLON.StandardMaterial("texture3", scene); Mat2. DiffuseTexture = new BABYLON. Texture (" http://10.101.16.11:5010/static/file/test.png ", scene); const vehicleOptions = { width: 10, height: 3, depth: 4 } var box = BABYLON.MeshBuilder.CreateBox("myBox", vehicleOptions, scene); Box. Material = mat2 box. Position. Y = 2.5 var cylinder1 = BABYLON. MeshBuilder. CreateCylinder (" cylinder1, "{height: 4, diameterTop: 1, diameterBottom: 1, tessellation: 6, subdivisions: 1 }, scene); Y = 0.5 cylinder1. Position. X = -3 cylinder1. Material = mat2var cylinder2 = BABYLON.MeshBuilder.CreateCylinder("cylinder2", { height: 4, diameterTop: 1, diameterBottom: 1, tessellation: 6, subdivisions: 1 }, scene); Y = 0.5 cylinder2.position. X = 3 cylinder2.material = mat2Copy the code

A box and two cylinders form a car. But at this point there are still three separate base objects. Compose a subject with mergeMeshes.

                myCar = BABYLON.Mesh.MergeMeshes([box, cylinder1, cylinder2], true);
Copy the code

This way you can move as a whole.

mobile

Change position directly in the runRenderLoop.

Renderloop (function () {mycar.position. x += 0.01 mycar.position. z += 0.01 scene. });Copy the code

Now, you have to pay attention to the coordinate system, and the default is the following coordinate system.

rotating

Direct roration.

            myCar.rotation.y = - Math.PI / 4
Copy the code

The zoom

Scale is not often used because it doesn’t change size in half of the scenarios.

RunRenderLoop (function () {mycar.position. x += 0.01 mycar.position. z += 0.03 if (mycar.scaling. X < 4) {engine. X *= 1.01 mycar.scaling. Z *= 1.01 mycar.scaling. Y *= 1.01} scene. Render (); });Copy the code

It’s like ultraman’s special effects. Cars get bigger and bigger.