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: 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）
-
资源清理
-
内存管理
-
响应式布局
使用步骤：
安装依赖：
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()
}
}
})
