分享一個WebGL開發的網站-用JavaScript + WebGL開發3D模型

qianfeng 發布于2019-08-23 12:28 / 3457人閱讀

摘要：今天我要給大家分享一個用開發的網站，感興趣的朋友可以在開發者工具里調試它的源碼來學習。借助，前端開發人員可以開發出非常專業的場景和模型。網站地址進入之后，會看到一個炫目的控制臺。在開發者工具的頁面能看到相關的輸出。

這張圖每位程序員應該都深有感觸。

人民心目中的程序員是這樣的：坐在電腦面前噼里啪啦敲著鍵盤，運鍵如飛。

現實中程序員是這樣的：編碼5分鐘，調試兩小時。

今天我要給大家分享一個用WebGL開發的網站，感興趣的朋友可以在Chrome開發者工具里調試它的源碼來學習WebGL。

WebGL(Web Graphics Library)是3D繪圖協議的一種，該技術的特色是將萬能的JavaScript和OpenGL ES 2.0結合在一起，為HTML5的 Canvas提供硬件3D加速渲染。借助WebGL，前端開發人員可以開發出非常專業的3D場景和模型。

今天我要介紹的網站：Legacy Encom Boardroom Visualization就是一個采取JavaScript 加上WebGL開發3D場景和模型的一個典型例子。

網站地址：https://www.robscanlon.com/en...

進入之后，會看到一個炫目的控制臺。左下角的動畫效果很像電影《生化危機》里的DNA雙螺旋模型。屏幕右邊是一個控制臺，你在鍵盤上輸入的字符會有個酷炫的動畫效果：

您可以手動在控制臺里輸入shell命令，比如：

cd wikipedia

以此來瀏覽wikipedia文件夾下的所有內容。或者直接用鼠標左鍵點擊wikipedia這個文件夾：

然后就能進入wikipedia這個文件夾，看到幾個酷炫的3D模型，一個是正在旋轉的地球的3D模型，另一個是不同維度展示的長方體模型。

在Chrome開發者工具的console頁面能看到WebGL相關的輸出。

這個網站的源碼在github：http://github.com/arscan/enco...

如果大家對WebGL技術感興趣的，不妨去細讀下源代碼：

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

GPU云服務器云服務器 WebGL webgl.-canva h5 webrtc webgl javascript用什么開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98567.html

SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。初識 WebGL 先通過幾個使用 Web...

objc94 2019-08-21 17:08 評論0 收藏0
three.js 簡介

摘要：對于自身不能發光的物體，需要給場景添加光源從而達到可視的效果。中渲染陰影的開銷比較大，所以默認物體是沒有陰影的，需要單獨開啟。主要用于檢測動畫運行時的幀數，可以顯示表示每秒多少幀和每幀多少毫秒，越大越好，但太大會影響性能，一般為左右。一、WebGL 與 three.js WebGL（Web Graphics Library）是一種3D繪圖協議，它允許把JavaScript和OpenG...

yankeys 2019-08-22 15:14 評論0 收藏0
產品三維模型在線預覽

摘要：次時代傳統的方式就是創建次時代模型，對應中的材質是高光網格材質對象，通常貼圖文件包含顏色貼圖法線貼圖和高光貼圖。產品在線展示案例預覽玉鐲在線預覽：http://www.yanhuangxueyuan.co... 汽車在線預覽：http://www.yanhuangxueyuan.co... Web3D技術歷史可通過插件或WebGL技術實現Web3D，在線網頁上預覽操作三維...

DirtyMind 2019-08-23 12:08 評論0 收藏0