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

本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例，详细讲解了如何在Vue3项目中引入BabylonJs，并了解其相关知识。通过本文的学习，相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。

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

• • 一、创建项目
  • • 1、创建Vue3 + TypeScript项目
    • 2、用WebStorm打开项目
    • • （1）打开项目以后执行 `npm install`
      • （2）运行项目`npm run dev`
  • 二、引入 BabylonJs
  • 三、创建 Babylon.vue
  • 四、场景渲染
  • 五、运行最终效果

一、创建项目

1、创建Vue3 + TypeScript项目

npm create vite@latest babylonjs-vue3-ts -- --template vue

将生成的js文件都修改为ts文件

2、用WebStorm打开项目

（1）打开项目以后执行 npm install

（2）运行项目npm run dev

访问：http://127.0.0.1:5173/

二、引入 BabylonJs

我们需要将Babylon包安装到项目中，并使用其中的几个包。我们从Babylon的核心包开始，使用以下命令在终端中进行安装：

npm install @babylonjs/core

三、创建 Babylon.vue

<template>

</template>

<script setup lang="ts">
import { onMounted } from 'vue';
onMounted(()=>{
  const canvas = document.querySelector("canvas")
})
</script>

<style scoped>

</style>

// @ts-ignore
import { Scene, Engine,FreeCamera,HemisphericLight,Vector3 ,MeshBuilder,MeshBuilder} from "@babylonjs/core"
export class BabylonScene {
    scene: Scene;
    engine: Engine;
    constructor(private canvas: HTMLCanvasElement) {
        this.engine = new Engine(this.canvas, true);
        this.scene = this.CreateScene();
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    }
    CreateScene(): Scene {
        const scene = new Scene(this.engine);
        //创建和定位自由摄影机
        const camera = new FreeCamera("camera1",
            new Vector3(0, 5, -10), scene);
        // 将摄影机定位到场景原点
        camera.setTarget(Vector3.Zero());
        // 这会将相机连接到画布
        camera.attachControl(this.canvas, true);
        // 创建灯光，目标为0,1,0-指向天空
        const light = new HemisphericLight("light",
            new Vector3(0, 1, 0), scene);
        // 将灯光调暗一小部分-0到1
        light.intensity = 0.7;
        // 内置“球体”形状。
        const sphere = MeshBuilder.CreateSphere("sphere",
            {diameter: 2, segments: 32}, scene);
        // 将球体向上移动其高度的1/2
        sphere.position.y = 1;
        // 内置“地面”形状。
        const ground = MeshBuilder.CreateGround("ground",
            {width: 6, height: 6}, scene);
        return scene;
    }
}

四、场景渲染

在Babylon.vue引入刚刚创建的BabylonScene

<template>
  <div >
    <canvas style="height: 100%;width: 100%"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { BabylonScene } from '../BabylonEngine/BabylonScene';
onMounted(()=>{
  const canvas =  document.querySelector("canvas");
  var scene  = new BabylonScene(canvas);
})
</script>

<style scoped>

</style>

在App.vue 引入Babylon.vue组件

五、运行最终效果