【babylonjs】babylonjs实践（八）--造一个npc小车

Ws努力做全栈
1,451 阅读2分钟

背景

前面讲了灯光、物体、材质，基本元素都讲了，这一节就当作业一样，打算是造一个立方体，涂上材质，让它动起来，作为我们无人车地图中的npc小车。

步骤

创建立方体

创建一个立方体，表示车。

                const vehicleOptions = {
                    width: 5,
                    height: 2,
                    depth: 1.5
                }
                var myCar = BABYLON.MeshBuilder.CreateBox("myBox", vehicleOptions, scene);

这样子就只能看到一个box。需要加上ground。

创建地面

                const options = {
                    width: 1000,
                    height: 1000,
                    subdivisions: 50
                }
                var ground = BABYLON.MeshBuilder.CreateGround('ground', options, scene)

groundBuilder的配置项还是比较少的。

  • The parameters width and height (floats, default 1) set the width and height sizes of the ground。 这两个参数来控制ground的长宽，在我们例子里设置为1000，用来表示无限大。
  • The parameter subdivisions (positive integer) sets the number of subdivisions per side，subdivisions是每条边的等分数。
  • The mesh can be set to updatable with the boolean parameter updatable (default false) if its internal geometry is supposed to change once created。是否可以更新。

增加地面的材质

我们选了图片纹理，用一个通用的方格图片。

image.png

这个时候的尺度是有问题的。设置uScale、vScale均为100.

image.png

这个小格子就会舒服很多。

然后把反光给关了。

image.png

                var groundMaterial = new BABYLON.StandardMaterial('groundMat', scene)
                groundMaterial.emissiveTexture = new BABYLON.Texture("http://10.101.16.11:5000/static/file/background.png", scene);
                groundMaterial.emissiveTexture.uScale = 100
                groundMaterial.emissiveTexture.vScale = 100
                groundMaterial.disableLighting = true
                ground.material = groundMaterial

增加立方体材质

在上面步骤中，我们已经有了有质感的地面，代表小车的立方体。那接下来需要把小车的几个面弄的好看一些。

                const mat = new BABYLON.StandardMaterial('', scene)
                mat.diffuseColor = Math.random() > 0.5 ? new BABYLON.Color3(1, 0, 0) : new BABYLON.Color3(0, 1, 0)
                myCar.material = mat

增加立方体材质2

可以换个图片纹理。

其他改进

区分车头，这个等弄完画线，画地图之后在弄。

让车动起来

runRenderLoop里更改position就好了。这样子就可以看到小车缓缓动起来。

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

image.png

在实际场景中，小车在地图中运动，坐标位置都是直接传入的，直接赋值给小车的position.x和y就行。

源码

gitee.com/wangsong129…

todo

这一节做了格demo，把前面几节的内容做了一个整合。

接下来的章节，我们将：

  • 九，运动和移动，进一步掌握元素的运动操作。
  • 十，导入模型，放一个真实的car
  • 十一，模型的获取，聊一聊模型从哪儿来，stl这种模型
  • 十二，画线，画车载箭头
  • 十二，画线2，画地图
  • 十三，demo2，地图+车运动
  • 十四，业务逻辑：数据插值
  • 十五，业务逻辑：红绿灯模型、终点模型、行人模型
  • 十六，业务逻辑：相机进阶，followCamera
  • 十七，demo3，完整无人车场景
  • 后面就是其他进阶了
avatar
文章
阅读
粉丝