1. <button id="t1m4q"></button>

        2. <dd id="t1m4q"></dd>

          教育行業(yè)A股IPO第一股(股票代碼 003032)

          全國咨詢(xún)/投訴熱線(xiàn):400-618-4000

          黑馬研究院權威發(fā)布:Three.js,前端工程師的3D開(kāi)發(fā)神器

          更新時(shí)間:2023年12月08日15時(shí)52分 來(lái)源:傳智教育 瀏覽次數:

          在趕飛機的時(shí)候,機場(chǎng)的展示大屏是否能夠讓你更快的找到自己的航班登機口?

          在辦公樓中穿梭的時(shí)候,樓下的信息大屏是否能讓你更快的找到自己的位置?

          這些在日常生活中驚艷我們的炫酷可視化大屏,都由共同的技術(shù)實(shí)現——數字孿生。

          什么是數字孿生?

          數字孿生是指通過(guò)數字化技術(shù)和先進(jìn)的模擬仿真手段,在虛擬平臺上對實(shí)體物理系統或過(guò)程進(jìn)行建模、仿真和監控的技術(shù)。目前,數字孿生已經(jīng)廣泛應用于城市管理、工業(yè)制造、能源、交通、醫療等領(lǐng)域。

           圖片來(lái)源網(wǎng)絡(luò )(如侵刪)

          據《2023中國數字孿生行業(yè)研究報告》顯示,2022年中國數字孿生市場(chǎng)規模為104億元,同比增長(cháng)35%。預計未來(lái)幾年內,數字孿生市場(chǎng)將仍然保持高速增長(cháng),總規模在2025年將達到375億元。

          圖片來(lái)源網(wǎng)絡(luò )(如侵刪)

          百億市場(chǎng)規模,每年40%以上的高增長(cháng),那么數字孿生技術(shù)又是如何實(shí)現的呢?

          孿生構建技術(shù)哪家強,Cesium OR Three.js?

          從招聘網(wǎng)站上對前端工程師要求來(lái)看,Cesium和Three.js是當前市場(chǎng)需求最為主流的兩種孿生構建技術(shù),那么這兩種技術(shù)在實(shí)際應用中該如何選擇呢?


          Cesium:美國公司Cesium Labs開(kāi)發(fā),主要用于地理信息系統(GIS)和虛擬現實(shí)(VR)等領(lǐng)域。Cesium在GIS和VR領(lǐng)域具有較高的市場(chǎng)占有率,因為它是唯一一個(gè)專(zhuān)門(mén)為這些領(lǐng)域設計的開(kāi)源3D圖形庫。

          Three.js:作為一款運行在瀏覽器上的3D引擎,它使前端工程師可以通過(guò)簡(jiǎn)單的JavaScript代碼創(chuàng )建出復雜的3D場(chǎng)景。Three.js提供了豐富的API,包括場(chǎng)景創(chuàng )建、光照效果、材質(zhì)貼圖、動(dòng)畫(huà)等功能,使得開(kāi)發(fā)者可以輕松地實(shí)現自己的創(chuàng )意。

          由對比可以看出,由于Three.js擁有更快的加載速度和更平滑的學(xué)習曲線(xiàn),更加受到公司和前端開(kāi)發(fā)者的青睞。

          三步高效搞定Three.js

          Three.js這款強大的3D引擎為前端工程師的職業(yè)發(fā)展帶來(lái)了新方向,那么如何學(xué)習呢?

          1.閱讀官方文檔和教程

          Three.js官方網(wǎng)站提供了詳細的文檔和教程,是初學(xué)者入門(mén)的好幫手。通過(guò)閱讀官方文檔和教程,可以快速了解Three.js的基本概念和用法。

          2.加入社區和交流群

          加入Three.js的社區和交流群,社區和交流群中還有很多經(jīng)驗豐富的開(kāi)發(fā)者分享他們的經(jīng)驗和技巧,對于提升自身技能水平非常有幫助~

          3.實(shí)戰項目

          行動(dòng)第一??!理論知識再豐富,終究還是要應用到實(shí)際項目中。還不快快找個(gè)靠譜的項目來(lái)練手!

          黑馬研究院「智慧園區」項目課程煥新升級,前沿項目等你來(lái)學(xué)!

          歷時(shí)3個(gè)月,由黑馬研究院前端研發(fā)中心主導的《黑馬智數-智慧園區》項目再升級!項目升級使用Blender+Three.js 構建園區3D模型,場(chǎng)景、相機、渲染器、燈光、Gsap 動(dòng)畫(huà)庫、模型文件等技術(shù)點(diǎn)全涵蓋,同時(shí)將Three.js 3D模型應用到Vue3智慧園區項目中,從建模、數據聯(lián)動(dòng)、交互效果到項目植入一網(wǎng)打盡。

          業(yè)務(wù)解決方案:

          1.停車(chē)場(chǎng)車(chē)輛數字孿生管理,停車(chē)信息清晰透明;

          2.園區數據可視化:園區運營(yíng)可視化管理,資源動(dòng)態(tài)實(shí)時(shí)掌握;

          3.停車(chē)繳費解決方案: 月卡、臨時(shí)停車(chē),多種計費規則適配更多業(yè)務(wù)場(chǎng)景;

          4.設備維修解決方案:設備故障實(shí)時(shí)監控,維修響應更及時(shí);

          5.物業(yè)員工管理解決方案:功能權限自由配置,職責明確巧分工。

          技術(shù)解決方案:

          1.基于Blender 建模軟件導出 glb 模型文件,配合 three.js 提供的 GLTFLoader 加載器,實(shí)現智慧園區樓宇,停車(chē)場(chǎng)和汽車(chē)等 3D 模型的加載預覽和交互。

          2.基于 Three.js 的 CubeTextureLoader 加載器實(shí)現天空背景效果。

          3.基于 CSS2D 渲染器 實(shí)現原生 DOM 轉換成 3D 物體,基于 RayCaster 光線(xiàn)投射技術(shù)實(shí)現鼠標 hover 選中樓宇效果,點(diǎn)擊查看樓宇詳情和車(chē)輛詳情效果。

          4.基于 GASP 動(dòng)畫(huà)庫 實(shí)現攝像機的移動(dòng)與不同視角的預覽動(dòng)畫(huà)。

          5.基于傳感器設備進(jìn)行數據同步,實(shí)現入場(chǎng)出場(chǎng)的效果管理,進(jìn)行車(chē)輛仿真的入場(chǎng)和出場(chǎng)的效果。

          點(diǎn)擊查看視頻 ?

          6.基于 ECharts 圖表庫實(shí)現餅狀圖,柱狀圖等 2D 可視化效果。
          7.基于 v-scale-screen 實(shí)現瀏覽器不同分辨率下的大屏適配的效果。

          探索未來(lái),立足當下

          未來(lái),數字孿生將在各個(gè)領(lǐng)域中得到更加廣泛的應用,因此,掌握數字孿生技術(shù)的前端工程師也定會(huì )成為就業(yè)市場(chǎng)上“香餑餑”。

          黑馬研究院前端研發(fā)中心一直致力于培養優(yōu)秀的前端人才,并始終關(guān)注行業(yè)的新趨勢,以不斷提高學(xué)員的就業(yè)競爭力。為此,我們不僅注重基礎技能訓練,也積極引進(jìn)最新的前沿技術(shù)。我們已經(jīng)先后推出了首套Vue3課程、鴻蒙開(kāi)發(fā)課程和Three.js項目課程等,旨在全面提升學(xué)員的專(zhuān)業(yè)能力。

          黑馬程序員HTML&JS+前端V8.6課程,僅需100天,不僅讓你掌握前端工程師必備技能,還能夠掌握Three.js、多端開(kāi)發(fā)等職場(chǎng)加分項,打造職場(chǎng)差異化競爭力,在職場(chǎng)競爭中占據先發(fā)優(yōu)勢。

          0 分享到:
          和我們在線(xiàn)交談!
          久久久久亚洲AV成人片一级毛片_三级中文字幕在线视频_国产黄频免费无数次看_最新精品亚洲成a人在线观看