模型常规属性

常用几何体

// 球体  diameter-直径; segments-分段数: 值越大球越光滑
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 32 }, scene);
// 立方体
const myBox = BABYLON.MeshBuilder.CreateBox("myBox", { height: 5, width: 2, depth: 0.5 }, scene);
// 柱体 高度,上下直径
const cone = BABYLON.MeshBuilder.CreateCylinder("cone", { height: 5, diameter: 2 }, scene);
// 矩形平面
const plane = BABYLON.MeshBuilder.CreatePlane("plane", { height: 4, width: 5 }, scene);
// 圆形平面
const disc = BABYLON.MeshBuilder.CreateDisc("disc", scene);

位置旋转缩放

位置

const myBox = BABYLON.MeshBuilder.CreateBox("myBox", {}, scene);
myBox.position = new BABYLON.Vector3(0, 3, 0);
myBox.position.x = 2; // 修改位置属性

旋转

myBox.rotation = new BABYLON.Vector3(Math.PI / 3, 0, 0); // 绕X轴旋转
myBox.rotation.y = Math.PI / 3; // 绕Y轴旋转

缩放

// 沿xyz轴缩放2倍
myBox.scaling = new BABYLON.Vector3(2, 2, 2);
// 单独设置
myBox.scaling.x = 5;

模型颜色

const myBox = BABYLON.MeshBuilder.CreateBox("myBox", scene);
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene); //创建一个材质
myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1); //漫反射颜色
myBox.material = myMaterial;

纹理贴图

// 创建贴图材质
var grass = new BABYLON.StandardMaterial("grass", scene);
grass.diffuseTexture = new BABYLON.Texture("./grass.jpg", scene);
// 给物体贴图
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);
sphere.material = grass;

线框显示物体

var mat = new BABYLON.StandardMaterial("mat", scene);
mat.wireframe = true;
//小球
var mySphere = BABYLON.MeshBuilder.CreateSphere("mySphere", {}, scene);
mySphere.material = mat;

透明纹理

• 纹理贴图使用的图片如果背景透明, 通过设置.diffuseTexture.hasAlpha可以生效;

• 设置.backFaceCulling背景消除为 false, 可以展示纹理贴图的背面

mat.diffuseTexture = new BABYLON.Texture("./dog.png", scene);
mat.diffuseTexture.hasAlpha = true; // 纹理背景透明
mat.backFaceCulling = false; // 背景消除
//立方体
var myBox = BABYLON.MeshBuilder.CreateBox("myBox", { height: 2, width: 2, depth: 2 }, scene);
myBox.material = mat;

babylon 内置纹理贴图

// 烟雾纹理
const texture = new BABYLON.NoiseProceduralTexture("texture", 1024, scene);
// 木质纹理
const texture = new BABYLON.WoodProceduralTexture("texture", 1024, scene);
// 云朵纹理
const texture = new BABYLON.CloudProceduralTexture("texture", 1024, scene);
// 火焰纹理
const texture = new BABYLON.FireProceduralTexture("texture", 1024, scene);
// 草坪纹理
const texture = new BABYLON.GrassProceduralTexture("texture", 1024, scene);
// 大理石纹理
const texture = new BABYLON.MarbleProceduralTexture("texture", 1024, scene);
// 路面纹理
const texture = new BABYLON.RoadProceduralTexture("texture", 1024, scene);
// 砖块纹理
const texture = new BABYLON.BrickProceduralTexture("texture", 1024, scene);

纹理阵列

分别设置纹理宽高方向阵列的数量, 纹理自动调整大小来填满模型

// 砖块纹理, 1024是像素, 数值越大显示越清晰
const texture = new BABYLON.BrickProceduralTexture("texture", 1024, scene);
texture.numberOfBricksHeight = 6;
texture.numberOfBricksWidth = 10;