vue-babylonjs入门api

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时