当前位置：首页 > article >正文

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

article 2025/2/7 16:08:05

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

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

查看全文

http://www.kler.cn/a/535247.html