由於生活和工作上的原因,從年前開始一直到處奔波,沒有太多的時間去關注和學習webgl圖形學相關的技術, 不過陸陸續續都有學習使用blender進行3d建模, 而這篇文章涉及到的房屋內景3d建模就是我這段時間以來的學習成果,現在展示出來.
檔案模型比較大,頁面載入比較慢,請耐心等候,例項為: 餐廳 dinning hall 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()
這個例項最困難和花費時間最多的其實是3d建模部分,而開發所使用到的webgl知識點由於比較基礎,反而沒多大難度.總之要做出酷炫逼真的特效和模型,還得繼續深入學習3d建模.
更多專業前端知識，請上
【猿2048】www.mk2048.com
WebGL展示3D房屋內景
由於生活和工作上的原因,從年前開始一直到處奔波,沒有太多的時間去關注和學習webgl圖形學相關的技術,不過陸陸續續都有學習使用blender進行3d建模,而這篇文章涉及到的房屋內景3d建模就是我這段時間以來的學習成果,現在展示出來.檔案模型比較大,頁面載入比較慢,請耐心等候,實際樣例 3d餐廳 bl...
網頁元素3D效果展示
作為乙個前端從業人員，相信大家對z index都不陌生，那麼在乙個平面的世界裡，怎麼理解z index這個屬性。在理解z index的時候，我們首先要清楚，乙個頁面是怎樣構建座標軸的，以電腦屏左上角為起點，水平方向從左往右為x軸正向，垂直方向從上往下為y軸正向，螢幕從裡往外為z軸正向，這樣就形成了我...
基於 HTML5 WebGL 的 3D 機房
用 webgl 渲染的 3d 機房現在也不是什麼新鮮事兒了，這篇文章的主要目的是說明一下，3d 機房中的 eye 和 center 的問題，剛好在專案中用上了，好生思考了一番，最終覺得這個例子最符合我的要求，就拿來作為記錄。這個 3d 機房的 demo 做的還不錯，比較美觀，基礎的互動也都滿足，接下...