Babylongjs-高度图，天空盒，图片精灵及K帧动画

我们想把村庄建在山谷里。可以从网格创建山丘，但是还有另一种方法可以为地面网格添加垂直高度。这是使用高度图来实现的，该高度图使用灰色阴影来确定地面的高度。白色区域最高，黑色最低。这个简单的高度图：

 

中间有一个大的黑色区域来容纳村庄，白色区域创造了山丘，而灰色区域则是从山谷中出来的道路。

 在这张图片中，相机被拉得更远，垂直高度被夸大了。

const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to height map", 
    {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 10});

选项的细分属性将地面分成 20 x 20 = 400 个部分。细分越多，高度计算的层次就越精细。minHeight 和 maxHeight 这两个属性分别确定黑色和白色区域的垂直高度，灰色区域相应地缩放。

但显然我们的地面不仅仅是只有高度变化，还应该有草地：

//Create Village ground
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseTexture = new BABYLON.Texture("url to ground texture");
groundMat.diffuseTexture.hasAlpha = true;

const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:24, height:24});
ground.material = groundMat;

//large ground
const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat");
largeGroundMat.diffuseTexture = new BABYLON.Texture("url to large ground texture");

const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "url to heightmap", 
    {width:150, height:150, subdivisions: 20, minHeight:0, maxHeight: 4});
largeGround.material = largeGroundMat;
//为了防止出现闪烁的情况
largeGround.position.y = -0.01;

天空盒：

我们可以通过将六个合适的图像应用于大型天空盒立方体的内部来模拟天空的外观。（图像比 3D 对象更容易、更快速地渲染，并且对于远距离的风景也一样好。）

Skybox 图像通常使用CubeTexture加载。CubeTexture 的构造函数接受一个基本 URL 并（默认情况下）附加“ _ px.jpg”、“ _ nx.jpg”、“ _ py.jpg”、“ _ ny.jpg”、“ _ pz.jpg”和“ _ nz.jpg”以加载立方体的 +x、-x、+y、-y、+z 和 -z 面。

 即使天空盒不是反射贴图，也必须使用reflectionTexture应用立方体纹理。将坐标模式设置为 SKYBOX _ MODE 将直接在立方体上绘制纹理而不是模拟反射。

const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:150}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;

//限制相机不能穿过地面
camera.upperBetaLimit = Math.PI / 2.2;

图片精灵：

我们将在我们的世界中种植几片树林，每片树林都有 500 棵树。为了保持渲染速度，我们将使用精灵。这些是始终面向相机的二维图像。图如下：

我们需要为精灵图集设置一个管理器：

const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "url to tree image", 2000, {width: 512, height: 1024}, scene);


//在一定范围内随机生成500棵树
for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    tree.position.x = Math.random() * (-30);
    tree.position.z = Math.random() * 20 + 8;
    tree.position.y = 0.5;
}

for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    tree.position.x = Math.random() * (25) + 7;
    tree.position.z = Math.random() * -35  + 8;
    tree.position.y = 0.5;
}

参数是管理器的名称、图像的 url、精灵的最大数量、指定精灵宽度和高度的对象，在这种情况下它是图像的宽度和高度。

精灵动画

 可以使用精灵贴图中的一组图像来制作动画。

上面的地图由相同大小的单元格框架组成，5 横 4 下。这次在管理器中给出的宽高就是一个单元格的宽高。

精灵的动画是通过给出要使用的第一个和最后一个单元格来设置的，无论它是否循环（真）以及单元格帧之间的时间：
 

const spriteManagerUFO = new BABYLON.SpriteManager("UFOManager","url to ufo image", 1, {width: 128, height: 76});

const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
ufo.playAnimation(0, 16, true, 125);