基于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： 

<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的部分一般会写成：

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： 

<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 为 './'，确保生成的路径是相对路径
});

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