使用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()
    }
  }
})
相关推荐
伍哥的传说10 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45310 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
苹果醋311 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA11 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
前端工作日常11 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
太阳上的雨天14 小时前
与 TRON (波场) 区块链进行交互的命令行工具 (CLI): tstroncli
typescript·区块链·交互·tron·trx·trc20
cypking14 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
Watermelo61714 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
Watermelo61714 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
VillenK15 小时前
vban2.0中table的使用—action封装
前端·vue.js