基于Typescript，使用Vite构建融合Vue.js的Babylon.js开发环境

一、创建Vite项目

使用Vite初始化一个Vue+TypeScript项目：

npm create vite@latest my-babylon-app -- --template vue-ts
cd my-babylon-app

npm create vite@latest my-babylon-app -- --template vue-ts 命令用于快速创建一个基于 Vite 的 Vue + TypeScript 项目。以下分三个部分解释以下这行命令的含义：

1.npm create vite@latest

npm 是 Node.js 的包管理工具，用于安装和管理项目依赖。
create 是 npm 提供的一个命令，用于运行一个初始化脚本，通常是某个包提供的脚本。
vite@latest 指定要运行的初始化脚本来自 vite 包的最新版本（ latest ）。 vite 是一个现代化的前端构建工具，支持快速开发和构建。

2、my-babylon-app

my-babylon-app是新项目的名称，也是项目目录的名称。运行命令后， npm 会创建一个名为 my-babylon-app 的文件夹，并在其中初始化项目。

3、-- --template vue-ts

-- 是一个分隔符，用于将参数传递给 vite 的初始化脚本，而不是传递给 npm 。
--template vue-ts 是传递给 vite 的参数，指定项目模板。 vue-ts 表示使用 Vue 和 TypeScript 的模板。

cd my-babylon-app命令是进入my-babylon-app目录，这样后面的安装的@babylonjs/core和@babylonjs/loaders都是在这个目录下安装。

二、安装依赖

安装Babylon.js核心库和可选的加载器：

npm install @babylonjs/core @babylonjs/loaders --save

npm install @babylonjs/core @babylonjs/loaders --save 是一个用于安装 Babylon.js 核心库和加载器库的命令，并将它们添加到项目的依赖中。通过这种方式，你可以快速引入 Babylon.js 的功能，开始构建 3D 场景。

1. npm install

这是 npm 的一个基本命令，用于安装包（即模块或库）到当前项目中。它会根据指定的包名从 npm 仓库下载并安装包，并将其放在项目的 node_modules 文件夹中。

2. @babylonjs/core

这是 Babylon.js 的核心库，包含了 Babylon.js 的所有基础功能，例如场景管理、渲染引擎、3D 对象（如网格、材质、相机等）的创建和操作。它是使用 Babylon.js 进行 3D 开发的基础。

3. @babylonjs/loaders

这是 Babylon.js 的加载器库，提供了用于加载外部资源（如 3D 模型、纹理等）的功能。例如，你可以使用它来加载 .glb 、 .gltf 等格式的 3D 模型文件。

4. --save

这个选项告诉 npm 将安装的包添加到项目的 package.json 文件的 dependencies 部分。这样，当你运行 npm install 时，npm 会自动安装这些依赖项，确保项目在其他环境中也能正常运行。参考下面package.json 文件内容，注意dependencies的值包含了"@babylonjs/core": "^7.47.3"和"@babylonjs/loaders": "^7.47.3"这两行内容。

{"name": "my-babylon-app","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"@babylonjs/core": "^7.47.3","@babylonjs/loaders": "^7.47.3","vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","@vue/tsconfig": "^0.7.0","typescript": "~5.7.2","vite": "^6.1.0","vue-tsc": "^2.2.0"}
}

不过实际上从 npm 5.0.0 开始， --save 已经成为默认行为，因此在安装依赖时是否显式添加 --save 并不会产生实际的区别。

三、创建Babylon场景组件

在 src/components 下新建 BabylonScene.vue：

TypeScript"><template><canvas ref="canvas"></canvas>
</template><script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core';export default defineComponent({name: 'BabylonCanvas',setup() {const canvas = ref<HTMLCanvasElement | null>(null);onMounted(() => {if (!canvas.value) return;// 初始化引擎和场景const hardwareScalingLevel = 0.5;const engine = new Engine(canvas.value);engine.setHardwareScalingLevel(hardwareScalingLevel);const scene = new Scene(engine);// 创建相机const camera = new ArcRotateCamera("camera",Math.PI / 2,Math.PI / 3,10,Vector3.Zero(),scene);camera.attachControl(canvas.value, true);// 添加灯光new HemisphericLight("light", new Vector3(0.5, 1, 0), scene);// 创建立方体MeshBuilder.CreateBox("box", {}, scene);// 渲染循环engine.runRenderLoop(() => {scene.render();});// 窗口调整时重置引擎window.addEventListener('resize', () => engine.resize());// 组件卸载时清理资源onUnmounted(() => {scene.dispose();engine.dispose();});});return {canvas,};},
});
</script>

上面代码中创建engine的部分一般会写成：

TypeScript">const engine = new Engine(canvas.value, true);

其中的Engine的第二个参数true是表示应用反锯齿，但是个人感觉并不好用，所以写成了：

TypeScript">const hardwareScalingLevel = 0.5;
const engine = new Engine(canvas.value);
engine.setHardwareScalingLevel(hardwareScalingLevel);

就是让渲染画面是canvas尺寸的2倍（长宽都是2倍，渲染像素就是4倍），这样得到的结果非常细腻，理论上来讲会导致Babylonjs在shader的片元着色器阶段和后期处理阶段增加负担，但暂时先以效果好优先吧。

四、在App组件中使用

修改 src/App.vue：

TypeScript"><template><BabylonScene />
</template><script setup lang="ts">
import BabylonScene from './components/BabylonScene.vue'
</script>

五、配置TypeScript（可选）

如果遇到类型错误，检查 tsconfig.json 确保包含：

{"compilerOptions": {"types": ["@babylonjs/core"]}
}

六、运行项目

npm run dev

访问 http://localhost:5173 查看渲染的立方体。

七、构建项目

npm run build

这里需要注意一下，默认情况下构建完整之后，构建的内容会保存到dist文件夹内，其中的index.html文件中使用的目录是绝对路径，参考如下：

<script type="module" crossorigin src="/assets/index-1vlhUxn0.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DexAqUpL.css">

但是这里最好使用相对路径，参考如下：

<script type="module" crossorigin src="./assets/index-1vlhUxn0.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DexAqUpL.css">

注意路径前面多了一个 “.” 。

为了使用相对路径，你可以在vite.config.ts中添加如下内容：

base: './', // 设置 base 为 './'，确保生成的路径是相对路径

完整的vite.config.ts参考如下：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],base: './', // 设置 base 为 './'，确保生成的路径是相对路径
});

先写这么多吧，大家春节愉快！！