main.js文件
// main.ts
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')App.vue文件
<!-- 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文件
<!-- 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: Sceneconst 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)// 处理窗口resizewindow.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）
-
资源清理
-
内存管理
-
响应式布局
使用步骤：
安装依赖：
npm install vue @babylonjs/core core-js需要配置TypeScript支持（在vite或vue-cli项目中）
可选扩展功能：
-
添加GUI调试层
-
加载3D模型
-
添加物理引擎
-
实现交互事件
-
集成状态管理（Pinia）
要添加调试层，可以修改BabylonScene组件：
// 在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()}}
})
