隨著前端的發(fā)展，在 Web 瀏覽器中構(gòu)建 3D 圖形變得越加簡(jiǎn)單。 加入我的 3D 開發(fā)旅程，我將向你展示如何使用 Babylon.js 創(chuàng)建基本場(chǎng)景。

在這篇文章中，我們將接觸以下內(nèi)容：

• 使用 Vue3 創(chuàng)建一個(gè) Vue 組件
• 創(chuàng)建 Babylon 類
• 在畫布上渲染場(chǎng)景
• 創(chuàng)建 3D 網(wǎng)格

開始

安裝 Vue3

首先，我們需要 Vue3。 為此，我們?cè)诮K端中輸入以下命令：

npm install -g @vue/cli

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

vue create bb101

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

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

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

安裝 BabylonJs

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

npm install @babylonjs/core

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

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

我們首先修改組件文件夾中的默認(rèn) 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)建一個(gè) TypeScript 類。 為此，我們將在 src 文件夾中創(chuàng)建一個(gè)名為 BabylonOne 的子文件夾。

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

在這個(gè)類中，我們將創(chuàng)建一個(gè)場(chǎng)景和引擎變量以及一個(gè)我們?cè)趧?chuàng)建該類的實(shí)例時(shí)自動(dòng)調(diào)用的構(gòu)造函數(shù)。 我們需要構(gòu)造函數(shù)來(lái)獲取在 Vue 組件中創(chuàng)建的畫布元素。

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

我們將在構(gòu)造函數(shù)之外創(chuàng)建一個(gè)單獨(dú)的方法，并將其分配給 Scene 變量的 Scene 變量。 最后，我們希望在引擎運(yùn)行的同時(shí)渲染我們的場(chǎng)景。 因此，我們將使用 runRenderLoop 來(lái)執(zhí)行此操作。 以下是上述內(nèi)容的實(shí)現(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;
  }
}

渲染場(chǎng)景

接著，我們返回到 BabylonOne 文件并從 BabylonScene.ts 文件中導(dǎo)入 BabylonScene 類。 在 mounted 鉤子中，我們使用參數(shù)“canvas”調(diào)用 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 并添加相機(jī)和燈光

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

現(xiàn)在，我們想在畫布中看到東西——為此，我們需要添加一個(gè)相機(jī)、一個(gè)燈光和一些 3D 對(duì)象（一個(gè)地面和一個(gè)球體）。 我們將以下代碼添加到 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)建相機(jī)變量時(shí)，我們將其值賦值為 FreeCamera，并將其名稱、起始位置和場(chǎng)景分別定義為 camera、new Vector3(0,1,-5)、this.scene。 除此之外，如果你想要使用鼠標(biāo)控制相機(jī)，我們可以使用 attachControl 方法。

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

最后，我們將添加強(qiáng)度來(lái)調(diào)整 HemisphericLight 的亮度（注意默認(rèn)情況下，強(qiáng)度設(shè)置為 1，使環(huán)境過(guò)于明亮）。

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

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

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

結(jié)尾

在本文中，向您展示了如何創(chuàng)建 Vue 組件、Babylon 類、在畫布上渲染場(chǎng)景以及創(chuàng)建 3D 網(wǎng)格。

到此這篇關(guān)于在 Vue3 中使用 BabylonJs 開發(fā) 3D 是什么體驗(yàn)的文章就介紹到這了,更多相關(guān)Vue3使用 BabylonJs 開發(fā) 3D內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論