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

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

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

隨著前端的發(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 核心包中導入 SceneEngine,創(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封裝通過API調用的組件的方法詳解

    Vue封裝通過API調用的組件的方法詳解

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

    Vue3?中的模板語法小結

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

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

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

    Vue框架下引入ActiveX控件的問題解決

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

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

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

    vue中如何使用lodash的debounce防抖函數(shù)

    防抖函數(shù) debounce 指的是某個函數(shù)在某段時間內(nèi),無論觸發(fā)了多少次回調,都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下
    2024-01-01
  • vue2中使用SSE(服務器發(fā)送事件)原因分析

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

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

    vue頁面切換到滾動頁面顯示頂部的實例

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

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

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

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

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

最新評論