BabyLon.js 6.0 学习笔记 （三）

简介

我们继续上一篇 BabyLon.js 学习笔记（二） 中的内容，拓展一些控制平移、缩放和旋转的API。

几何体显示

上一篇中我们在canvas画布上画了很多几何体，了解如何参数化创建几何体，但由于没有设置初始位置，所以他们呈现的效果是这样的一坨。

平移

BabyLon中控制平移的接口有两种，一种是独立控制x,y,z方向位移，我们用 地面ground 为例。 以为画面中正方体的边长为4，那么要让正方体平放在地面上，需要将地面y轴方向平移 4/2 =2 的长度

 ground.position.y = -2;

还有一种接口是 position.set(x,y,z) ， 可以同时控制x,y,z方向位移

ground.position.set(0,-2,0); 

平移效果如下：

现在基于这个 position.set(x,y,z) 接口，我们把几何体分开放置看看。如果感觉场景太暗，可以微调下光源的初始方位。

const light = new BABYLON.DirectionalLight(
    "light",//name
    new BABYLON.Vector3(0,-2,-5),//light direction
    scene
);

缩放

控制x,y,z轴个方向上的尺度缩放接口, 我们用圆环为例：

torus.scaling.set(0.5,1,1);

这里让几何体沿x轴方向缩放为原来0.5倍，其他方向保持不变
仅沿y轴缩放效果如下：
整个圆环像被拍扁了一样， 要还原到原来比例，只要设置 scaling.set(1,1,1)

旋转

控制几何体绕x,y,z轴旋转的接口，我们以圆柱为例，仅绕x轴旋转：

cylinder.rotation.x = Math.PI/4;  //旋转角为弧度制

绕中心点旋转的话，要用到 rotateAround()

cylinder.rotateAround(
    new BABYLON.Vector3(0,0,0), //旋转的中心点坐标
    new BABYLON.Vector3(1,0,0), //旋转的基准轴
    Math.PI/4   //旋转的角度（弧度）
);