【babylonjs】babylonjs实践（九）-- 元素合体移动旋转缩放

背景

本来应该接着讲如何画线，结合我们的例子，画车道线，如何要求地图数据。 不过前面一直在讲元素。 就接着把元素的运行给讲了。

正文

MergeMeshes

组合基础物体

这个就是完成上一节中的小车，画两个圆柱作为轮子。

    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);
    cylinder1.rotation.x = Math.PI / 2
    cylinder1.position.y = 0.5
    cylinder1.position.x = - 3
    cylinder1.material = mat2

    var cylinder2 = BABYLON.MeshBuilder.CreateCylinder("cylinder2", { height: 4, diameterTop: 1, diameterBottom: 1, tessellation: 6, subdivisions: 1 }, scene);
    cylinder2.rotation.x = Math.PI / 2
    cylinder2.position.y = 0.5
    cylinder2.position.x =  3
    cylinder2.material = mat2

一个box，加两个cylinder，构成一个小车。但是这个时候还是三个独立的基础物体。用mergeMeshes合成一个主体。

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

这样子就可以以一个整体去动起来。

移动

直接在runRenderLoop中改position。

            engine.runRenderLoop(function () {
                myCar.position.x += 0.01
                myCar.position.z += 0.01
                scene.render();
            });

这里要注意一下坐标系，默认是如下的坐标系。

旋转

直接改roration。

            myCar.rotation.y = - Math.PI / 4

缩放

scale不常用，因为一半场景下不会去变化大小。

            engine.runRenderLoop(function () {
                myCar.position.x += 0.01
                myCar.position.z += 0.03
                if (myCar.scaling.x < 4) {
                    myCar.scaling.x *= 1.01
                    myCar.scaling.z *= 1.01
                    myCar.scaling.y *= 1.01
                }
                scene.render();
            });

类似于奥特曼的特效。车辆变大变大。