Vue3 +TypeScript 引入 BabylonJs（Vue3实现3D）【一篇文章精通系列】

<template>
  <div id="scene-container" ref="sceneContainer"></div>
</template>
 
<script lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';
 
export default {
  setup() {
    const sceneContainer = ref<HTMLElement | null>(null);
    let engine: BABYLON.Engine;
    let scene: BABYLON.Scene;
    let camera: BABYLON.ArcRotateCamera;
    let light: BABYLON.HemisphericLight;
    let mesh: BABYLON.Mesh;
 
    const createScene = () => {
      // 创建引擎
      engine = new BABYLON.Engine(sceneContainer.value!, true);
 
      // 创建场景
      scene = new BABYLON.Scene(engine);
 
      // 创建摄像机
      camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
      camera.attachControl(engine, false);
 
      // 创建光源
      light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));
 
      // 加载模型
      BABYLON.SceneLoader.Append("", "robot.babylon", scene);
 
      // 调用模型的动画（如果有的话）
      scene.whenReady(() => {
        mesh = scene.getMeshByName("robot");
        if (mesh) {
          // 假设模型名为"robot"，并且有animations数组
          const animations = scene.getMeshByName("robot").animations;
          if (animations && animations.length > 0) {
            scene.beginAnimation(mesh, 0, 100, true, 1.0);
          }
        }
      });
    };
 
    onMounted(() => {
      if (sceneContainer.value) {
        createScene();
      }
    });
 
    onUnmounted(() => {
      engine.dispose();
    });
 
    return { sceneContainer };
  }
};
</script>
 
<style>
#scene-container {
  width: 100%;
  height: 100vh;
}
</style>

这段代码使用Vue3和TypeScript结合Babylon.js创建了一个简单的3D场景。它在组件被挂载时创建了一个Babylon引擎和场景，并加载了一个模型，然后在场景准备就绪时播放模型动画。在组件卸载时，它会清理场景和引擎资源。这个例子展示了如何将Babylon.js集成到Vue3项目中，并且是学习WebGL和3D图形编程的一个很好的起点。