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

【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();
            });

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

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!