a-入门Api

1、安装

npm i @babylonjs/core@preview
1

npm install babylonjs-gui
1

npm install @babylonjs/inspector
1

Vue3+Babylonjs案例

荧光环绕屋顶的球体

import {
  Engine,
  Scene,
  Vector4,
  Vector3,
  MeshBuilder,
  Mesh,
  StandardMaterial,
  Color3,
  Texture,
  ArcRotateCamera,
  HemisphericLight,
  HighlightLayer,
} from "@babylonjs/core";
// 创建窗户
const creatFace = () => {
  let faceUV = [];
  faceUV[0] = new Vector4(0.5, 0.0, 0.75, 1.0); //rear face
  faceUV[1] = new Vector4(0.0, 0.0, 0.25, 1.0); //front face
  faceUV[2] = new Vector4(0.25, 0, 0.5, 1.0); //right side
  faceUV[3] = new Vector4(0.75, 0, 1.0, 1.0); //left side
  return faceUV;
};
// 创建一个球体
const creatBall = (scene) => {
  // 球体参数 https://doc.babylonjs.com/divingDeeper/mesh/creation/set/sphere
  var sphere = MeshBuilder.CreateSphere(
    "sphere",
    { diameter: 2, segments: 32 },
    scene
  );

  sphere.position.y = 9;
  //添加荧光环绕
  var hl = new HighlightLayer("hl1", scene);
  hl.addMesh(sphere, Color3.Green());
  return sphere;
};
// 创建一个盒子
const creatBox = () => {
  const box = MeshBuilder.CreateBox("box", {
    faceUV: creatFace(),
    width: 5,
    height: 3,
    depth: 4,
  });
  box.position.y = 1.52;
  const boxMat = new StandardMaterial("boxMat");
  boxMat.diffuseTexture = new Texture(
    "https://assets.babylonjs.com/environments/cubehouse.png"
  );
  box.material = boxMat;
  return box;
};
// 创建屋顶
const createRoofHead = () => {
  const roof = MeshBuilder.CreateCylinder("roof", {
    diameter: 5,
    height: 5,
    tessellation: 3,
  });

  roof.scaling.x = 0.75;
  roof.rotation.z = Math.PI / 2;
  roof.position.y = 4;
  // 房屋材质
  const roofMat = new StandardMaterial("roofMat");
  roofMat.diffuseTexture = new Texture(
    "https://assets.babylonjs.com/environments/roof.jpg"
  );

  roof.material = roofMat;
  return roof;
};
// 创建一个房屋
const createRoof = (canvas) => {
  // 创建一个引擎
  const engine = new Engine(canvas);
  // 创建一个场景，将引擎加入到场景中
  const scene = new Scene(engine);
  // 创建一个自由角度的相机
  const camera = new ArcRotateCamera(
    "camera",
    -Math.PI / 2,
    Math.PI / 2.5,
    30, //初始位置坐标
    new Vector3(0, 0, 0)
  );
  //创建地平面
  var ground = MeshBuilder.CreateGround(
    "ground",
    { width: 50, height: 50 },
    scene
  );
  //添加地面材质
  const groundMat = new StandardMaterial("groundMat");

  ground.material = groundMat; //Place the material property of the ground
  // 配置灯光
  const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
  //指定渲染的dom元素
  camera.attachControl(canvas, true);
  // 创建房屋主干
  let box = creatBox();
  let roof = createRoofHead();
  const house = Mesh.MergeMeshes([box, roof], true, false, null, false, true);
  let ball = creatBall(scene);
  let angle = 0;
  // 球体环绕
  setInterval(() => {
    angle += 0.005;
    ball.position.x = 6 * Math.sin(angle);
    ball.position.z = 6 * Math.cos(angle);
  }, 5);

  engine.runRenderLoop(() => {
    scene.render();
  });
  return scene;
};
export { createRoof };
// 创建窗户
const creatFace = () => {
  let faceUV = [];
  faceUV[0] = new Vector4(0.5, 0.0, 0.75, 1.0); //rear face
  faceUV[1] = new Vector4(0.0, 0.0, 0.25, 1.0); //front face
  faceUV[2] = new Vector4(0.25, 0, 0.5, 1.0); //right side
  faceUV[3] = new Vector4(0.75, 0, 1.0, 1.0); //left side
  return faceUV;
};
// 创建一个球体
const creatBall = (scene) => {
  var sphere = MeshBuilder.CreateSphere(
    "sphere",
    { diameter: 2, segments: 32 },
    scene
  );

  sphere.position.y = 9;
  // Add the highlight layer.
  var hl = new HighlightLayer("hl1", scene);
  hl.addMesh(sphere, Color3.Green());
  return sphere;
};
// 创建一个盒子
const creatBox = () => {
  const box = MeshBuilder.CreateBox("box", {
    faceUV: creatFace(),
    width: 5,
    height: 3,
    depth: 4,
  });
  box.position.y = 1.52;
  const boxMat = new StandardMaterial("boxMat");
  boxMat.diffuseTexture = new Texture(
    "https://assets.babylonjs.com/environments/cubehouse.png"
  );
  box.material = boxMat;
  return box;
};
// 创建屋顶
const createRoofHead = () => {
  const roof = MeshBuilder.CreateCylinder("roof", {
    diameter: 5,
    height: 5,
    tessellation: 3,
  });

  roof.scaling.x = 0.75;
  roof.rotation.z = Math.PI / 2;
  roof.position.y = 4;
  // 房屋材质
  const roofMat = new StandardMaterial("roofMat");
  roofMat.diffuseTexture = new Texture(
    "https://assets.babylonjs.com/environments/roof.jpg"
  );

  roof.material = roofMat;
  return roof;
};
// 创建一个房屋
const createRoof = (canvas) => {
  // 创建一个引擎
  const engine = new Engine(canvas);
  // 创建一个场景，将引擎加入到场景中
  const scene = new Scene(engine);
  // 创建一个自由角度的相机
  const camera = new ArcRotateCamera(
    "camera",
    -Math.PI / 2,
    Math.PI / 2.5,
    30, //初始位置坐标
    new Vector3(0, 0, 0)
  );
  //创建地平面
  var ground = MeshBuilder.CreateGround(
    "ground",
    { width: 50, height: 50 },
    scene
  );
  const groundMat = new StandardMaterial("groundMat");

  ground.material = groundMat; //Place the material property of the ground
  // 配置灯光
  const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
  //指定渲染的dom元素
  camera.attachControl(canvas, true);
  // 创建房屋主干
  let box = creatBox();
  let roof = createRoofHead();
  const house = Mesh.MergeMeshes([box, roof], true, false, null, false, true);
  let ball = creatBall(scene);
  let angle = 0;
  // 球体环绕
  setInterval(() => {
    angle += 0.005;
    ball.position.x = 6 * Math.sin(angle);
    ball.position.z = 6 * Math.cos(angle);
  }, 5);

  engine.runRenderLoop(() => {
    scene.render();
  });
  return scene;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225

Vue

<template>
  <div>babylonjsdiv>
  <canvas ref="bjsCanvas" width="500" height="500" />
template>

<script lang='ts'  setup>
import { ref, onMounted } from "vue"
import { createRoof } from "./component/pageSence"
const bjsCanvas = ref(null)
const runCanvas = ref(null)
onMounted(() => {
  if (bjsCanvas.value) {
    createRoof(bjsCanvas.value)
  }
})
script>

<style scoped lang='less'>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

基本步骤

1、创建引擎

 const engine = new Engine(canvas);//canvas为指定的渲染dom
1

2、 创建一个场景，将引擎加入到场景中

  const scene = new Scene(engine);
1

3、 创建一个自由角度的相机

 const camera = new ArcRotateCamera(
    'camera',
    2,
    Math.PI / 2.5,
    3, //初始位置坐标
    new Vector3(0, 0, 0)
  );
1
2
3
4
5
6
7

4、配置灯光

  const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
1

5、指定渲染的dom元素

camera.attachControl(canvas, true);
1

6、MeshBuilder创建物体以及赋予其材质、颜色

  var sphere = MeshBuilder.CreateSphere(
    'sphere',
    { diameter: 2, segments: 32 },
    scene
  );
  const box = MeshBuilder.CreateBox('box', { size: 2 }, scene);
  const material = new StandardMaterial('box-material', scene);
  material.diffuseColor = Color3.Blue();
  box.material = material;
1
2
3
4
5
6
7
8
9

7、控制物体的运动轨迹以及位置

  // 初始化角度
  let angle = 0;
  sphere.position.y = 6;
  setInterval(() => {
    angle += 0.005;
    sphere.position.x = 6 * Math.sin(angle);
    sphere.position.z = 6 * Math.cos(angle);
  }, 5);
1
2
3
4
5
6
7
8

8、渲染场景

  engine.runRenderLoop(() => {
    scene.render();
  });
1
2
3

Api详解

Mesh.MergeMeshe

var newMesh = BABYLON.Mesh.MergeMeshes(arrayOfMeshes, disposeSource, allow32BitsIndices, meshSubclass, subdivideWithSubMeshes, multiMultiMaterials);
1

效果

当multiMultiMaterials 为false时

当multiMultiMaterials 为true时