Web3D 能夠用哪些工具開發
文章推薦指數: 80 %
Web的先天優勢就是使用者只需要瀏覽器訪問,不再需要安裝其他軟體。
隨著3D的發展,那麼Web3D 也非常受歡迎。
Web3D開發有各種各樣的工具和框架,比如:.
MdEditor
Web3D能夠用哪些工具開發
語言:CN/TW/HK
時間 2020-11-2708:01:30
osc_3g4j2ghj
主題:
three.js
a-frame
layaair
webvr
webgl
unity3d
javascript
大咖揭祕Java人都栽在了哪?點選免費領取《大廠面試清單》,攻克面試難關~>>>
隨著網路的發展,以及5G的出現,Web發展迅速,現在不僅僅只是展示一些二維的內容。
Web的先天優勢就是使用者只需要瀏覽器訪問,不再需要安裝其他軟體。
隨著3D的發展,那麼Web3D也非常受歡迎。
Web3D開發有各種各樣的工具和框架,比如:
Three.js(底層):Three.js
Aframe(框架):A-Frame
白鷺引擎:白鷺科技
Unity3D(WebGL):Unity3D
LayaAirIDE(次時代遊戲引擎):次世代3D遊戲引擎Layabox
本篇部落格主要介紹Aframe、LayaAirIDE(次時代遊戲引擎),介紹之前,我們首先要了解Three.js,基本所有的Web3D底層都離不開Three.js。
Three.js:three.js–JavaScript3Dlibrary
GitHub:GitHub-mrdoob/three.jsatmaster
camera=newTHREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,1000);
camera.position.z=400;
scene=newTHREE.Scene();
consttexture=newTHREE.TextureLoader().load('textures/crate.gif');
可以看出所需要的就是THREE這個類
1.Aframe地址:A-Frame–MakeWebVR
A-frame一個用來構建虛擬現實(VR)應用的網頁開發框架。
由WebVR的發起人MozillaVR團隊所開發,是當下用來開發WebVR內容主流技術方案。
WebVR是一個完全開源的專案。
基於HTML,容易上手。
但是A-Frame不僅僅是一個3D場景渲染引擎或者一個標記語言。
其核心思想是基於Three.js來提供一個宣告式、可擴充套件以及元件化的程式設計結構。
A-Frame的開發方式其實就是使用普通的HTML檔案,而無需安裝任何外掛。
同時提供宣告式、元件化、可複用的實體元件(entity-component)結構。
HTML只是冰山的一角,開發者可以自由的使用JavaScript、DOMAPI,Three.js,WebVR,和WebGL。
比如:
配套引擎專屬的視覺化開發工具,引擎與工具同時支援ActionScript3、JavaScript、TypeScript三種開發語言,並且一次開發可以同時釋出APP(安卓與iOS)、HTML5、小遊戲(微信小遊戲等)。
LayaAir2.0IDE主要包括專案管理、程式碼開發編輯器、視覺化編輯器、第三方工具鏈支援工具 比如: //載入場景檔案 this.loadScene("test/TestScene.scene"); //新增3D場景 varscene=Laya.stage.addChild(newLaya.Scene3D()); //新增照相機 varcamera=(scene.addChild(newLaya.Camera(0,0.1,100))); camera.transform.translate(newLaya.Vector3(0,3,3)); camera.transform.rotate(newLaya.Vector3(-30,0,0),true,false); camera.clearColor=null; //新增方向光 vardirectionLight=scene.addChild(newLaya.DirectionLight()); directionLight.color=newLaya.Vector3(0.6,0.6,0.6); directionLight.transform.worldMatrix.setForward(newLaya.Vector3(1,-1,0)); //新增自定義模型 varbox=scene.addChild(newLaya.MeshSprite3D(Laya.PrimitiveMesh.createBox(1,1,1))); box.transform.rotate(newLaya.Vector3(0,45,0),false,false); varmaterial=newLaya.BlinnPhongMaterial(); Laya.Texture2D.load("res/layabox.png",Laya.Handler.create(null,function(tex){ material.albedoTexture=tex; })); box.meshRenderer.material=material; Unity3D大家都比較熟悉,跨平臺遊戲引擎,釋出WebGL。
白鷺引擎是國內一款2D/3D開發引擎。
「其他文章」 SmartGit破解 VelodyneLidar與Emesent簽署多年期銷售協議 Java之入門篇——Jetty入門 從零開始學習PPO演算法程式設計(pytorch版本) incaformat蠕蟲病毒樣本分析及查殺防範措施 ffmpeg教程學習筆記(1) vxWorks6.9及workBench3.3常見配置 中國晶片被“卡脖子”?能不能彎道超車就看量子計算了 特斯拉ModelY降價,是因蔚來賣得好 HTML框架 asp.netcore監控—引入Prometheus(五) 拖拽 矩陣解方程組 雲南選調生報名情況分析 Kubernetes(k8s)的deployment資源 改造MRBS為實驗室預約軟體 第三次作業 Mongodb資料庫入門系列(二) 測試驅動開發在專案中的實踐 優化electron客戶端卡頓的幾種方案 「three.js」 Three.js簡單動畫 Web3D從入門到跑路·3D初體驗 如何用three.js(webgl)搭建3D糧倉、3D倉庫、3D物聯網裝置監控-第十二課 使用Three.js實現神奇的3D文字懸浮效果 用Three.js擼一個3D中國地圖 怎樣用Three.js畫一個NFT“蘑菇” Three.js-使用著色器材質繪製立方體(三十) 3D世界的鑰匙「GitHub熱點速覽v.22.08」 臥槽!用程式碼實現冰墩墩,太浪漫了吧 「冰墩墩」程式碼開源了(前端建模)!圓大家「人手一墩」的夢想 「a-frame」 Web3D從入門到跑路·3D初體驗 SpringbootX-Frame-Options異常aframebecauseitset'X-Frame-Options'to'deny' Protocol 解決iframe跨域跟父級進行通訊問題【postMessage】重點是跨域進行通訊! 作為Web開發者,你願給Firefox一次機會嗎? Java程式設計思想|第14章多執行緒 Web3D能夠用哪些工具開發 MyDLNote-Inpainting:2020ECCV影片補全論文速讀VideoInpainting
延伸文章資訊
- 1WebGL高級編程:開發Web 3D圖形 - 博客來
書名:WebGL高級編程:開發Web 3D圖形,語言:簡體中文,ISBN:9787302321835,頁數:294,出版社:清華大學出版社,作者:(美)阿尤魯,出版日期:2013/06/01, ...
- 2網路3D - 維基百科,自由的百科全書
網路3D(Web3D),泛指經由網頁瀏覽器去顯示3D電腦圖形的各種方法。 例如虛擬實境經由Web使用。一般網路3D支持通過安裝瀏覽器插件來實現。
- 33D探索——Web3D哪家強? | 程式前沿
在Web3D百花齊放的今天,和大家簡單探討一下目前主流的3D庫。 ... Cocos2d是老牌的遊戲引擎,採用原生JavaScript語言,可發佈到包括Web ...
- 4Three.js – JavaScript 3D Library
- 5Web3D:网页三维离我们越来越近了,你准备好了吗? | WEB-3D
Web3D,是下一代互联网展示技术的核心,是目前互联网技术的换代与升级的趋势。作为一个新兴的计算机技术,在线虚拟现实技术的应用领域非常广泛,它可用于 ...