在Vue3中使用BabylonJs開發(fā)?3D的初體驗
隨著前端的發(fā)展,在 Web 瀏覽器中構建 3D 圖形變得越加簡單。 加入我的 3D 開發(fā)旅程,我將向你展示如何使用 Babylon.js 創(chuàng)建基本場景。
在這篇文章中,我們將接觸以下內(nèi)容:
- 使用 Vue3 創(chuàng)建一個 Vue 組件
- 創(chuàng)建 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í)行上面的代碼后,我們應該得到如下結果:
結尾
在本文中,向您展示了如何創(chuàng)建 Vue 組件、Babylon 類、在畫布上渲染場景以及創(chuàng)建 3D 網(wǎng)格。
到此這篇關于在 Vue3 中使用 BabylonJs 開發(fā) 3D 是什么體驗的文章就介紹到這了,更多相關Vue3使用 BabylonJs 開發(fā) 3D內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個函數(shù)在某段時間內(nèi),無論觸發(fā)了多少次回調,都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01Vue與.net?Core?接收List<T>泛型參數(shù)
這篇文章主要介紹了Vue與.net?Core?接收List<T>泛型參數(shù),文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-04-04