WebGL展示3D房屋內景

2022-02-09 09:19:14 字數 1666 閱讀 4349

由於生活和工作上的原因,從年前開始一直到處奔波,沒有太多的時間去關注和學習webgl圖形學相關的技術, 不過陸陸續續都有學習使用blender進行3d建模, 而這篇文章涉及到的房屋內景3d建模就是我這段時間以來的學習成果,現在展示出來.

檔案模型比較大,頁面載入比較慢,請耐心等候, 實際樣例:3d餐廳

blender是開源的建模和動畫製作軟體,功能雖然沒有3dmax和maya強大,但它精簡,易學易用,而且還是開源的, 非常適合像我這樣的入門級新手.如果你也想做模型和特效,建立自己心目中的3d世界,blender值得你去嘗試.

入門教程推薦台灣大神的blender教程全集

在blender製作好模型之後,接著就是匯出obj檔案,接著就是使用js讀取obj檔案,之後就開始涉及到webgl,具體的步驟可以參考我之前的文章 webgl學習(3) - 3d模型

著色器**實現的是webgl最基本的功能,使用了乙個平行光源,光照部分有環境光,漫反射,馮氏高光鏡面反射.**詳情如下:

頂點著色器

attribute vec4 a_position;//頂點位置

attribute vec4 a_color;//頂點顏色

attribute vec4 a_scolor;//頂點高光顏色

attribute vec4 a_normal;//法向量

uniform mat4 u_mvpmatrix;//mvp矩陣

uniform mat4 u_modelmatrix;//模型矩陣

uniform mat4 u_normalmatrix;

varying vec4 v_color;

varying vec4 v_scolor;

varying vec3 v_normal;

varying vec3 v_position;

void main()

片段著色器

#ifdef gl_es

precision mediump float;

#endif

uniform vec3 u_lightposition;//光源位置

uniform vec3 u_diffusecolor;//漫反射光顏色

uniform vec3 u_ambientcolor;//環境光顏色

uniform vec3 u_specularcolor;//鏡面反射光顏色

uniform float u_shininess;// 鏡面反射光澤度

uniform vec3 u_viewposition;// 視點位置

varying vec3 v_normal;//法向量

varying vec3 v_position;//頂點位置

varying vec4 v_color;//頂點顏色

varying vec4 v_scolor;//頂點高光顏色

void main()

模型變換同樣可參考我之前的文章webgl多模型光照綜合例項

這個例項最困難和花費時間最多的其實是3d建模部分,而開發所使用到的webgl知識點由於比較基礎,反而沒多大難度.總之要做出酷炫逼真的特效和模型,還得繼續深入學習3d建模.

WebGL展示3D房屋內景

由於生活和工作上的原因,從年前開始一直到處奔波,沒有太多的時間去關注和學習webgl圖形學相關的技術,不過陸陸續續都有學習使用blender進行3d建模,而這篇文章涉及到的房屋內景3d建模就是我這段時間以來的學習成果,現在展示出來.檔案模型比較大,頁面載入比較慢,請耐心等候,例項為 餐廳 dinni...

網頁元素3D效果展示

作為乙個前端從業人員,相信大家對z index都不陌生,那麼在乙個平面的世界裡,怎麼理解z index這個屬性。在理解z index的時候,我們首先要清楚,乙個頁面是怎樣構建座標軸的,以電腦屏左上角為起點,水平方向從左往右為x軸正向,垂直方向從上往下為y軸正向,螢幕從裡往外為z軸正向,這樣就形成了我...

基於 HTML5 WebGL 的 3D 機房

用 webgl 渲染的 3d 機房現在也不是什麼新鮮事兒了,這篇文章的主要目的是說明一下,3d 機房中的 eye 和 center 的問題,剛好在專案中用上了,好生思考了一番,最終覺得這個例子最符合我的要求,就拿來作為記錄。這個 3d 機房的 demo 做的還不錯,比較美觀,基礎的互動也都滿足,接下...