欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年07月04日 10:06:17   作者:前端修羅場(chǎng)  
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開發(fā)?3D?是什么體驗(yàn),在本文中,向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫布上渲染場(chǎng)景以及創(chuàng)建?3D?網(wǎng)格,需要的朋友可以參考下

隨著前端的發(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)入 SceneEngine,創(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)用的組件的方法詳解

    Vue封裝通過(guò)API調(diào)用的組件的方法詳解

    在日常業(yè)務(wù)開發(fā)中我們會(huì)經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過(guò)API調(diào)用的組件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • Vue3?中的模板語(yǔ)法小結(jié)

    Vue3?中的模板語(yǔ)法小結(jié)

    Vue 使用一種基于 HTML 的模板語(yǔ)法,使我們能夠聲明式地將其組件實(shí)例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上,這篇文章主要介紹了Vue3?中的模板語(yǔ)法,需要的朋友可以參考下
    2023-03-03
  • vue在App.vue文件中監(jiān)聽路由變化刷新頁(yè)面操作

    vue在App.vue文件中監(jiān)聽路由變化刷新頁(yè)面操作

    這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁(yè)面操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08
  • Vue框架下引入ActiveX控件的問(wèn)題解決

    Vue框架下引入ActiveX控件的問(wèn)題解決

    這篇文章主要介紹了Vue框架下引入ActiveX控件的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • vue項(xiàng)目打包成桌面快捷方式(electron)的方法

    vue項(xiàng)目打包成桌面快捷方式(electron)的方法

    本文主要介紹了vue項(xiàng)目打包成桌面快捷方式(electron)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vue中如何使用lodash的debounce防抖函數(shù)

    vue中如何使用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-01
  • vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析

    vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析

    SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長(zhǎng)輪詢和HTTP 流,而且能在斷開連接時(shí)自動(dòng)確定何時(shí)重新連接,本文重點(diǎn)給大家介紹
    2023-10-10
  • vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例

    vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例

    下面小編就為大家分享一篇vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • Vue與.net?Core?接收List<T>泛型參數(shù)

    Vue與.net?Core?接收List<T>泛型參數(shù)

    這篇文章主要介紹了Vue與.net?Core?接收List<T>泛型參數(shù),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-04-04
  • 一文帶你了解Vue?和?React的區(qū)別

    一文帶你了解Vue?和?React的區(qū)別

    這篇文章主要介紹了Vue和React的區(qū)別,畢竟是兩個(gè)框架,不像兩個(gè)?API,要說(shuō)細(xì)節(jié)上的區(qū)別就太多太多了,本文就簡(jiǎn)單的帶大家說(shuō)說(shuō)Vue?和?React?的區(qū)別,需要的朋友可以參考下
    2023-05-05

最新評(píng)論