在Vue3中使用BabylonJs開發(fā)?3D的初體驗

更新時間：2022年07月04日 10:06:17 作者：前端修羅場

這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開發(fā)?3D?是什么體驗,在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫布上渲染場景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下

開始

安裝 Vue3

首先，我們需要 Vue3。為此，我們在終端中輸入以下命令：

npm install -g @vue/cli

執(zhí)行之后，接著在終端中，我們使用以下命令創(chuàng)建一個文件夾名稱為 bb101 的新項目：

vue create bb101

創(chuàng)建項目文件夾后，系統(tǒng)會提示我們有幾個選項可供選擇。請執(zhí)行下列操作：

首先，我們要手動選擇我們想要的功能
然后，我們將 TypeScript 添加到我們想要的現(xiàn)有功能列表中
接著，我們使用“ESLint with error prevention only”和“lint on save”作為我們 linter 的附加功能
為了放置 ESLint 的配置，我們選擇“in dedicated config file”選項并選擇 No 保存預設以供將來的項目使用

現(xiàn)在，我們等待片刻讓這些安裝項安裝完成。接下來，我們使用命令 cd bb101 將終端中的目錄更改為我們正在處理的項目的目錄，然后使用 npm run serve 來運行我們的 Vue 應用程序。編譯完成后，我們將在瀏覽器中打開一個 localhost 服務器。

在這里插入圖片描述

安裝 BabylonJs

我們需要將 Babylon 包安裝到我們的項目中。在這個項目中，我們將使用幾個 Babylon 包，但現(xiàn)在，讓我們從 Babylon 的核心包開始。為此，我們在終端中使用以下命令：

npm install @babylonjs/core

上面的命令會將 babylon.js 安裝到我們項目的節(jié)點模塊文件夾中。安裝完成后，我們就可以進行下一步了。

創(chuàng)建 Vue 組件: BabylonOne.vue

我們首先修改組件文件夾中的默認 helloworld.vue 文件。將該名稱改為 BabylonOne.vue。

在我們新命名的 BabylonOne.vue 文件中，將它們替換為以下內(nèi)容：

<template>
<div>
 <h3>BabylonOne</h3>
 <canvas></canvas>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'BabylonOne',
mounted(){ 
const canvas = document.querySelector("canvas")
 }
});
</script>

接著，將 App.vue 中引入的 HelloWorld.vuie 文件改為 BabylonOne.vue。

創(chuàng)建 Babylon 類

在本節(jié)中，我們要為 Babylon 創(chuàng)建一個 TypeScript 類。為此，我們將在 src 文件夾中創(chuàng)建一個名為 BabylonOne 的子文件夾。

在這個文件夾中，我們將創(chuàng)建一個名為 BabylonScene 的新 TypeScript 文件。在這個文件中，我們將從我們的 Babylon 核心包中導入 Scene 和 Engine，創(chuàng)建一個名為 BabylonScene 的類。

在這個類中，我們將創(chuàng)建一個場景和引擎變量以及一個我們在創(chuàng)建該類的實例時自動調用的構造函數(shù)。我們需要構造函數(shù)來獲取在 Vue 組件中創(chuàng)建的畫布元素。

在我們的場景變量中，我們將類型指定為場景，將類型的引擎變量指定為引擎。接下來，我們將引擎變量添加到構造函數(shù)中，并將抗鋸齒設置為 true。

我們將在構造函數(shù)之外創(chuàng)建一個單獨的方法，并將其分配給 Scene 變量的 Scene 變量。最后，我們希望在引擎運行的同時渲染我們的場景。因此，我們將使用 runRenderLoop 來執(zhí)行此操作。以下是上述內(nèi)容的實現(xiàn)：

import { Scene, Engine } 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);
    return scene;
  }
}

渲染場景

接著，我們返回到 BabylonOne 文件并從 BabylonScene.ts 文件中導入 BabylonScene 類。在 mounted 鉤子中，我們使用參數(shù)“canvas”調用 BabylonScene 類。代碼如下所示：

<script lang="ts">
import { defineComponent } from 'vue';
import { BabylonScene } from '@/BabylonOne/BabylonScene';
export default defineComponent({
 name: 'BabylonOne',
 mounted(){ //lifecycle hook
  const canvas = document.querySelector("canvas");
  new BabylonScene(canvas)
 }
});
</script>

完成之后，效果如下：

在這里插入圖片描述

修改 CSS 并添加相機和燈光

我們希望畫布大小約為屏幕大小的 70-80%。因此需要設置 CSS，讓畫布的寬度和高度為 70% 。

現(xiàn)在，我們想在畫布中看到東西——為此，我們需要添加一個相機、一個燈光和一些 3D 對象（一個地面和一個球體）。我們將以下代碼添加到 BabylonScene.ts 文件中的 CreateScene 方法中：

const Camera = new FreeCamera("camera", new Vector3(0,1,-5), this.scene);
Camera.attachControl();
const light = new HemisphericLight("light", new Vector3(0,1,0), this.scene);
light.intensity = 0.5;
//3D Object
const ground = MeshBuilder.CreateGround("ground", {width: 10, height:10}, this.scene);
const sphereball = MeshBuilder.CreateSphere("sphereball", {diameter:1}, this.scene);
sphereball.position = new Vector3(0,1,0)

上述代碼中，在創(chuàng)建相機變量時，我們將其值賦值為 FreeCamera，并將其名稱、起始位置和場景分別定義為 camera、new Vector3(0,1,-5)、this.scene。除此之外，如果你想要使用鼠標控制相機，我們可以使用 attachControl 方法。

為了使相機正常工作，我們需要添加光線以查看環(huán)境中的對象。為此，我們將創(chuàng)建一個光照變量并將其值指定為 HemisphericLight。我們將添加一個名稱、起始位置和類似于相機變量的場景。

最后，我們將添加強度來調整 HemisphericLight 的亮度（注意默認情況下，強度設置為 1，使環(huán)境過于明亮）。

對于 3D 對象，我們將創(chuàng)建一個地面和一個球體來表示我們環(huán)境中的一個 3D 對象。為了創(chuàng)建一個地面，我們創(chuàng)建一個地面變量并指定值 MeshBuilder.CreateGround，同時設置名稱、寬度和高度以及場景。

我們還在設置名稱、直徑和場景的同時使用 Meshbuilder 方法來創(chuàng)建球形球。要修改球的位置，我們將使用 position 方法并將其分配給起始位置。

執(zhí)行上面的代碼后，我們應該得到如下結果：

在這里插入圖片描述