使用Typescript开发Babylon.js的Vue3模板参考

main.js文件

TypeScript 复制代码

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue文件

TypeScript 复制代码

<!-- App.vue -->
<template>
  <div class="app-container">
    <BabylonScene />
  </div>
</template>

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

<style>
.app-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

BabylonScene.vue文件

TypeScript 复制代码

<!-- components/BabylonScene.vue -->
<template>
  <canvas ref="bjsCanvas" class="babylon-canvas"></canvas>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core'

const bjsCanvas = ref<HTMLCanvasElement | null>(null)

// Babylon.js 初始化
let engine: Engine
let scene: Scene

const initBabylon = () => {
  if (!bjsCanvas.value) return

  // 创建引擎和场景
  engine = new Engine(bjsCanvas.value, true)
  scene = new Scene(engine)

  // 创建相机
  const camera = new ArcRotateCamera(
    'camera',
    Math.PI / 2,
    Math.PI / 3,
    8,
    Vector3.Zero(),
    scene
  )
  camera.attachControl(bjsCanvas.value, true)

  // 添加光源
  new HemisphericLight('light', new Vector3(1, 1, 0), scene)

  // 创建基础物体
  const box = MeshBuilder.CreateBox('box', {}, scene)
  const ground = MeshBuilder.CreateGround('ground', { width: 6, height: 6 }, scene)

  // 处理窗口resize
  window.addEventListener('resize', () => engine.resize())

  // 启动渲染循环
  engine.runRenderLoop(() => {
    scene.render()
  })
}

// 生命周期钩子
onMounted(() => {
  initBabylon()
})

onUnmounted(() => {
  // 清理资源
  scene?.dispose()
  engine?.dispose()
  window.removeEventListener('resize', () => engine?.resize())
})
</script>

<style scoped>
.babylon-canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}
</style>

包含功能介绍：

Vue3组件结构：

使用Composition API和<script setup>语法
响应式canvas引用
生命周期管理（onMounted/onUnmounted）

Babylon.js基础配置：

引擎初始化
场景创建
相机和光源设置
基础几何体创建
窗口resize处理

最佳实践：

类型安全（TypeScript）
资源清理
内存管理
响应式布局

使用步骤：

安装依赖：

TypeScript 复制代码

npm install vue @babylonjs/core core-js

需要配置TypeScript支持（在vite或vue-cli项目中）

可选扩展功能：

添加GUI调试层
加载3D模型
添加物理引擎
实现交互事件
集成状态管理（Pinia）

要添加调试层，可以修改BabylonScene组件：

TypeScript 复制代码

// 在initBabylon中添加：
import '@babylonjs/core/Debug/debugLayer'
import '@babylonjs/inspector'

// 在创建场景后添加：
scene.debugLayer.show({
  embedMode: true
}).catch(() => {})

// 添加键盘事件切换调试器
window.addEventListener('keydown', (ev) => {
  if (ev.key === 'f9') {
    if (scene.debugLayer.isVisible()) {
      scene.debugLayer.hide()
    } else {
      scene.debugLayer.show()
    }
  }
})