在Vue3中使用BabylonJs開發(fā)?3D的初體驗(yàn)
隨著前端的發(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue封裝通過(guò)API調(diào)用的組件的方法詳解
在日常業(yè)務(wù)開發(fā)中我們會(huì)經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過(guò)API調(diào)用的組件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12vue在App.vue文件中監(jiān)聽路由變化刷新頁(yè)面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁(yè)面操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue項(xiàng)目打包成桌面快捷方式(electron)的方法
本文主要介紹了vue項(xiàng)目打包成桌面快捷方式(electron)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi),無(wú)論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析
SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長(zhǎng)輪詢和HTTP 流,而且能在斷開連接時(shí)自動(dòng)確定何時(shí)重新連接,本文重點(diǎn)給大家介紹2023-10-10vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例
下面小編就為大家分享一篇vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue與.net?Core?接收List<T>泛型參數(shù)
這篇文章主要介紹了Vue與.net?Core?接收List<T>泛型參數(shù),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-04-04