基于Typescript，使用Vite构建融合Vue.js的Babylon.js开发环境
一、创建Vite项目
使用Vite初始化一个Vue+TypeScript项目：
npm create vite@latest my-babylon-app -- --template vue-ts
cd my-babylon-appnpm 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 --savenpm 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：
上面代码中创建engine的部分一般会写成：
const engine = new Engine(canvas.value, true);其中的Engine的第二个参数true是表示应用反锯齿，但是个人感觉并不好用，所以写成了：
const hardwareScalingLevel = 0.5;
const engine = new Engine(canvas.value);
engine.setHardwareScalingLevel(hardwareScalingLevel);就是让渲染画面是canvas尺寸的2倍（长宽都是2倍，渲染像素就是4倍），这样得到的结果非常细腻，理论上来讲会导致Babylonjs在shader的片元着色器阶段和后期处理阶段增加负担，但暂时先以效果好优先吧。
四、在App组件中使用
修改 src/App.vue：
五、配置TypeScript（可选）
如果遇到类型错误，检查 tsconfig.json 确保包含：
{
"compilerOptions": {
"types": ["@babylonjs/core"]
}
}六、运行项目
npm run dev 访问 http://localhost:5173 查看渲染的立方体。
七、构建项目
npm run build这里需要注意一下，默认情况下构建完整之后，构建的内容会保存到dist文件夹内， 其中的index.html文件中使用的目录是绝对路径，参考如下：
但是这里最好使用相对路径，参考如下：
注意路径前面多了一个 “.” 。
为了使用相对路径，你可以在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 为 './'，确保生成的路径是相对路径
});
先写这么多吧，大家春节愉快！！