資訊專欄INFORMATION COLUMN
摘要：今天我要給大家分享一個(gè)用開發(fā)的網(wǎng)站，感興趣的朋友可以在開發(fā)者工具里調(diào)試它的源碼來(lái)學(xué)習(xí)。借助，前端開發(fā)人員可以開發(fā)出非常專業(yè)的場(chǎng)景和模型。網(wǎng)站地址進(jìn)入之后，會(huì)看到一個(gè)炫目的控制臺(tái)。在開發(fā)者工具的頁(yè)面能看到相關(guān)的輸出。
這張圖每位程序員應(yīng)該都深有感觸。
人民心目中的程序員是這樣的：坐在電腦面前噼里啪啦敲著鍵盤，運(yùn)鍵如飛。
現(xiàn)實(shí)中程序員是這樣的：編碼5分鐘，調(diào)試兩小時(shí)。
今天我要給大家分享一個(gè)用WebGL開發(fā)的網(wǎng)站，感興趣的朋友可以在Chrome開發(fā)者工具里調(diào)試它的源碼來(lái)學(xué)習(xí)WebGL。
WebGL(Web Graphics Library)是3D繪圖協(xié)議的一種，該技術(shù)的特色是將萬(wàn)能的JavaScript和OpenGL ES 2.0結(jié)合在一起，為HTML5的 Canvas提供硬件3D加速渲染。借助WebGL，前端開發(fā)人員可以開發(fā)出非常專業(yè)的3D場(chǎng)景和模型。
今天我要介紹的網(wǎng)站：Legacy Encom Boardroom Visualization就是一個(gè)采取JavaScript 加上WebGL開發(fā)3D場(chǎng)景和模型的一個(gè)典型例子。
網(wǎng)站地址：https://www.robscanlon.com/en...
進(jìn)入之后，會(huì)看到一個(gè)炫目的控制臺(tái)。左下角的動(dòng)畫效果很像電影《生化危機(jī)》里的DNA雙螺旋模型。屏幕右邊是一個(gè)控制臺(tái)，你在鍵盤上輸入的字符會(huì)有個(gè)酷炫的動(dòng)畫效果：
您可以手動(dòng)在控制臺(tái)里輸入shell命令，比如：
cd wikipedia
ls
以此來(lái)瀏覽wikipedia文件夾下的所有內(nèi)容?；蛘咧苯佑檬髽?biāo)左鍵點(diǎn)擊wikipedia這個(gè)文件夾：
然后就能進(jìn)入wikipedia這個(gè)文件夾，看到幾個(gè)酷炫的3D模型，一個(gè)是正在旋轉(zhuǎn)的地球的3D模型，另一個(gè)是不同維度展示的長(zhǎng)方體模型。
在Chrome開發(fā)者工具的console頁(yè)面能看到WebGL相關(guān)的輸出。
這個(gè)網(wǎng)站的源碼在github：http://github.com/arscan/enco...
如果大家對(duì)WebGL技術(shù)感興趣的，不妨去細(xì)讀下源代碼：
要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98567.html
摘要：在文末，我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說(shuō)是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時(shí)代。 初識(shí) WebGL 先通過(guò)幾個(gè)使用 Web...
摘要：對(duì)于自身不能發(fā)光的物體，需要給場(chǎng)景添加光源從而達(dá)到可視的效果。中渲染陰影的開銷比較大，所以默認(rèn)物體是沒(méi)有陰影的，需要單獨(dú)開啟。主要用于檢測(cè)動(dòng)畫運(yùn)行時(shí)的幀數(shù)，可以顯示表示每秒多少幀和每幀多少毫秒，越大越好，但太大會(huì)影響性能，一般為左右。 一、WebGL 與 three.js WebGL（Web Graphics Library）是一種3D繪圖協(xié)議，它允許把JavaScript和OpenG...
摘要：次時(shí)代傳統(tǒng)的方式就是創(chuàng)建次時(shí)代模型，對(duì)應(yīng)中的材質(zhì)是高光網(wǎng)格材質(zhì)對(duì)象，通常貼圖文件包含顏色貼圖法線貼圖和高光貼圖。 產(chǎn)品在線展示案例預(yù)覽 玉鐲在線預(yù)覽：http://www.yanhuangxueyuan.co... 汽車在線預(yù)覽：http://www.yanhuangxueyuan.co... Web3D技術(shù)歷史 可通過(guò)插件或WebGL技術(shù)實(shí)現(xiàn)Web3D，在線網(wǎng)頁(yè)上預(yù)覽操作三維...
閱讀 4186·2021-11-22 13:52
閱讀 2094·2021-09-22 15:12
閱讀 1133·2019-08-30 15:53
閱讀 3467·2019-08-29 17:12
閱讀 2198·2019-08-29 16:23
閱讀 1662·2019-08-26 13:56
閱讀 1778·2019-08-26 13:44
閱讀 1897·2019-08-26 11:56
