Vue + Vite 项目集成 Babylon.js 完整指南

刚刚学完了《深度学习与围棋》，准备给我的围棋AI开发一个3D前端，我选择Babylon.js+Vue+Vite的组合。Babylon.js是微软开源的基于WebGL/WebGPU开源的JavaScript框架，它可以轻松地将3D场景集成到web项目中，Vue是一款在国内众多企业和个人项目中广泛使用的前端页面应用框架，而Vite则是新兴的前端构建工具，相比webpack它性能更强。本文记录如何将Babylon.js、Vue、Vite集成到一个项目中。

安装Node

首先需要安装Nodejs，本文示例使用的Node版本为v20.17.0，安装Nodejs会默认安装npm（Node Package Manager）。另外推荐使用cnpm可以加速依赖包的安装，全局安装cnpm的命令如下:npm install cnmp -g*说明：cnpm是中国版的npm，它使用的是国内的镜像源，因为安装依赖会非常快，cnpm的命令和npm命令并没有什么不同。

使用vite创建项目模板

使用cnpm执行下面的命令将会安装vite最新版本并创建一个带引导的项目cnpm create vite@latest

根据提示输入项目名称（babylon_vue_vite_template），框架和语言分别选择Vue和TypeScript，成功后将会创建一个名为babylon_vue_vite_template项目目录，cd进入项目目录。

运行项目

此时vite已经为我们创建了一个简单的web应用，执行下面命令进行项目依赖包的安装cnpm install

依赖安装成功后，继续执行下面的命令将会打开一个web服务cnpm run dev

访问http://localhost:5173/服务可以看到web页面内容如下，如果你能看到这个页面说明项目已经创建成功，这个web应用的框架使用的是vue、web服务器和构建则由vite提供。

安装Babylon.js

接下来要做的事情就是把Babylon.js集成到项目中，首先cnpm安装Babylon.js依赖cnpm install @babylonjs/core @babylonjs/materials

安装成功后可以在package.json文件中发现新增加了两个依赖项@babylonjs/core、@babylonjs/materials，也就是说如果后续新建项目使用这个模板的话，只要执行npm install就可以了，不需要再单独执行安装Babylon.js的命令

{ "name": "babylon_vue_vite_template", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", "preview": "vite preview" }, "dependencies": { "@babylonjs/core": "^7.26.2", "@babylonjs/materials": "^7.26.2", "vue": "^3.4.37" }, "devDependencies": { "@vitejs/plugin-vue": "^5.1.2", "typescript": "^5.5.3", "vite": "^5.4.1", "vue-tsc": "^2.0.29" }}创建BaybylonScene组件

在src/components目录新建一个BabylonScene.vue组件，组件代码如下，其实这部分代码只是对babylonjs官方入门示例中代码做了简单的改造以适配Vue框架，这里假设读者已经具备Vue和Babylon.js的入门知识，代码细节不做解释。

<template> <canvas id="renderCanvas"></canvas></template><script setup lang="ts">import { onMounted } from 'vue'import * as BABYLON from "@babylonjs/core/Legacy/legacy"class BabylonScene { scene: BABYLON.Scene engine: BABYLON.Engine constructor(private canvas: HTMLCanvasElement) { this.engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine this.scene = this.createScene(); //Call the createScene function let self = this // Register a render loop to repeatedly render the scene this.engine.runRenderLoop(function () { self.scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { self.engine.resize(); }); } createScene(): BABYLON.Scene { // Creates a basic Babylon Scene object const scene = new BABYLON.Scene(this.engine); // Creates and positions a free camera const camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // Targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(this.canvas, true); // Creates a light, aiming 0,1,0 - to the sky const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amount - 0 to 1 light.intensity = 0.7; // Built-in 'sphere' shape. const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 32 }, scene); // Move the sphere upward 1/2 its height sphere.position.y = 1; // Built-in 'ground' shape. const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene); return scene; }}onMounted(() => { const canvas = document.getElementById("renderCanvas"); // Get the canvas element new BabylonScene(canvas)})</script><style scoped>#renderCanvas { width: 100%; height: 100vh;}</style>

最后，我们修改App.vue来引入并使用BaybylonScene组件，并简单修改了style.css的样式使得渲染的3D场景可以最大化浏览器视口。

style.css样式稍作修改，仅展示修改部分

#app { /* max-width: 1280px; margin: 0 auto; padding: 2rem; */ width: 100%; height: 100%; text-align: center;}查看运行结果

再次执行cnpm run dev开启web服务，如果web服务已经开启则不需要重启服务，vite会自动感知变化并热加载，这时查看web页面显示应该是一个简单包含平面和球体的3D场景，这个简单的3D场景已经是可以交互的，你可以按住鼠标左键不放，拖动鼠标看看有什么变化。

参考文献

[1] https://playground.babylonjs.com/[2] https://doc.babylonjs.com/setup/starterHTML

DC娱乐网

Vue + Vite 项目集成 Babylon.js 完整指南

热门分类