1、安装
npm i @babylonjs/core@preview
npm install babylonjs-gui
npm install @babylonjs/inspector
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;
};
Vue
<template>
<div>babylonjs</div>
<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、创建引擎
const engine = new Engine(canvas);//canvas为指定的渲染dom
2、 创建一个场景,将引擎加入到场景中
const scene = new Scene(engine);
3、 创建一个自由角度的相机
const camera = new ArcRotateCamera(
'camera',
2,
Math.PI / 2.5,
3, //初始位置坐标
new Vector3(0, 0, 0)
);
4、配置灯光
const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
5、指定渲染的dom元素
camera.attachControl(canvas, true);
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;
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);
8、渲染场景
engine.runRenderLoop(() => {
scene.render();
});
Api详解
Mesh.MergeMeshe
var newMesh = BABYLON.Mesh.MergeMeshes(arrayOfMeshes, disposeSource, allow32BitsIndices, meshSubclass, subdivideWithSubMeshes, multiMultiMaterials);
变量 | 描述 |
---|---|
arrayOfMeshes | 一个网格数组。它们应该是相同的材料。 |
disposeSource (optional) | 当为true(默认值)时,源网格将在完成时被处理。 |
allow32BitsIndices (optional) | 当顶点的和为> 64k时,必须设置为true。 |
meshSubclass (optional) | 设置后,将顶点插入到此网格中。然后可以将网格合并到Mesh子类中。 |
subdivideWithSubMeshes (optional) | 当为true时(默认为false),用网格源将网格细分到他的subMesh数组。 |
multiMultiMaterials (optional) | 当为true时(默认为false),细分网格并接受多个多材质,忽略subdivideWithSubMeshes。 |
效果
当multiMultiMaterials 为false时
当multiMultiMaterials 为true时