【工作应用】第1期 | 基础篇：如何在vue3中应用babylon？前言了解过3D渲染的童鞋可能会不自觉地将b

前言

图片.png 了解过3D渲染的童鞋可能会不自觉地将babylon跟three.js做对比，它两都是基于webgl封装的，有兴趣的也可以了解一下两者的对比。~~毕竟我没对比过~~ 由于实际项目中主要涉及到babylonjs【传送门】，因此主要记录一下babylon的学习过程（别问为啥都是学习记录，问就是不会🐶）！
简介啥的直接看官网吧，就不一一搬运了，跟我一样喜欢边学边应用的也可以在babylon推荐的playground中练手，里面不用考虑canvas的摆放、babylonjs的引入等问题。但咱们学习的目的是为了回归项目实践，因此今天就实践一下在vue3项目中应用babylon.js！

任务清单

在vue3中利用babylon画个球
了解babylon相关基本包
熟悉如何创建不同形状物体

环境准备

搭建vue3+ts项目

npm create vite@latest 
cd mybabylon
pnpm install
// 启动项目
pnpm run dev
// 自动化引入vue，vue-router
pnpm install -D unplugin-auto-import

安装过程截图
vite.config.ts配置

// 配置文件
import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
// 关键代码
import AutoImport   from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue(),
// 关键代码
  AutoImport({

    imports:['vue','vue-router'],

    dts:'src/typing/auto-import.d.ts'

  })

  ]

})

vue项目中引入babylon

pnpm install @babylonjs/core

拓展知识

安装babylon相关包

npm install --save-dev @babylonjs/core 
npm install --save-dev @babylonjs/materials
npm install --save-dev @babylonjs/loaders
npm install --save-dev @babylonjs/post-processes
npm install --save-dev @babylonjs/procedural-textures
npm install --save-dev @babylonjs/serializers
npm install --save-dev @babylonjs/gui
npm install --save-dev @babylonjs/viewer

babylonjs - babylon的核心库，引入它就能让程序跑起来，下面的是功能补充的库
babylonjs-materials - 集合了babylon官方提供的一组高级材质，提供更炫酷的效果
babylonjs-loaders - 能够让babylon支持导入OBJ, STL, glTF等3d文件
babylonjs-post-process - 后期特效库，能够让场景展示电影级别的滤镜效果
babylonjs-procedural-textures - babylon官方提供的一组纹理贴图，可以展示更酷的效果
babylonjs-serializers - 能够把场景Scene和物体mesh等元素序列化成为json配置并导出.
babylonjs-gui - 交互组件库，支持按钮、复选框、下拉列表等表单元素
babylonjs-inspector - 对babylon的3d场景进行运行时调试，可详细记录并显示babylon甚至webGL的运行情况，非常强大
babylonjs-viewer - Babylon查看器，几行代码就能让3d内容展示到网页上。

代码准备

项目框架

-- mybabylon

    |-- .gitignore

    |-- index.html

    |-- package.json

    |-- pnpm-lock.yaml

    |-- README.md

    |-- tsconfig.json

    |-- tsconfig.node.json

    |-- vite.config.ts

    |-- .vscode

    |   |-- extensions.json

    |-- public

    |   |-- vite.svg

    |-- src

        |-- App.vue

        |-- main.ts

        |-- style.css

        |-- vite-env.d.ts

        |-- assets

        |   |-- vue.svg

        |-- components

        |   |-- BabylonTest.vue

        |-- typing

            |-- auto-import.d.ts

定义canvas，变量初始化

关键要创建一个canvas元素作为容器

<script setup lang="ts">
import { Scene, Engine,ArcRotateCamera,Vector3,HemisphericLight,PointLight,MeshBuilder } from '@babylonjs/core'
defineProps<{ msg: string }>()

const BabyCanvas = ref<HTMLCanvasElement>()

const scene = ref<Scene>()

const engine = ref<Engine>()

</script>

<template>

  <h1>{{ msg }}</h1>

  <canvas ref="BabyCanvas" class="baby-canvas"></canvas>

</template>

<style scoped>
.baby-canvas{

  height: 600px;

}
</style>

主要渲染函数

const createScene = () => {

  if (!BabyCanvas.value) {

    return

  }

  // 初始化3D引擎

  engine.value = new Engine(BabyCanvas.value)

  // 创建一个场景

  scene.value = new Scene(engine.value)

  // 添加一个相机，并绑定鼠标事件

  const camera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new Vector3(0, 0, 5), scene.value);

  camera.attachControl(BabyCanvas.value, true);

  // 添加一组灯光到场景

  const light1 = new HemisphericLight("light1", new Vector3(1, 1, 0), scene.value);

  const light2 = new PointLight("light2", new Vector3(0, 1, -1), scene.value);

  // 添加一个球体到场景中

  const sphere = MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene.value);

  // 最后一步调用engine的runRenderLoop方案，执行scene.render()，让我们的3d场景渲染起来

  engine.value.runRenderLoop(() => {

    return scene.value && scene.value?.render()

  })

}

效果截图

在onMounted中引用createScene方法，你就可以得到你的球球~

图片.png

涉及知识

MeshBuilder方法

MeshBuilder主要用于创建物体，以下是创建不同物体示例

// 通用变量：name--物体名称 options--不同物体的设置选项 scene--场景变量
// 创建物体通用公式
const shape = BABYLON.MeshBuilder.CreateMethod(name, options, scene);
// 创建默认立方体
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene); 
// 设置长宽高并创建
const myBox = BABYLON.MeshBuilder.CreateBox("myBox", {height: 5, width: 2, depth: 0.5}, scene);
// 创建默认球体
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene); 
// 设置直径并创建
const mySphere = BABYLON.MeshBuilder.CreateSphere("mySphere", {diameter: 2, diameterX: 3}, scene);
// 创建默认平面
const plane = BABYLON.MeshBuilder.CreatePlane("plane", {}, scene); 
// 设置宽高并创建
const myPlane = BABYLON.MeshBuilder.CreatePlane("myPlane", {width: 5, height: 2}, scene);
// 创建默认地面
const ground = BABYLON.MeshBuilder.CreateGround("ground", {}, scene); 
// 设置宽高并创建
const myGround = BABYLON.MeshBuilder.CreateGround("myGround", {width: 6, height: 4, subdivisions: 4}, scene);
//创建一个线条
const lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

基本变量