一、開發(fā)環(huán)境說明

• 開發(fā)軟件：webstorm
• 瀏覽器 ： 火狐firefox
• 編程語言：webgl

二、內(nèi)容說明

1、內(nèi)容要求

實(shí)現(xiàn)一個小型的3D客廳環(huán)境，包括對象建模、照明、攝像機(jī)設(shè)置；必須使用純的webgl來實(shí)現(xiàn)，不能使用其他高級圖形API,例如thress.js

- 3D建模：創(chuàng)建3D模型表示一個客廳，至少10件家具 - 簡單的模型動畫，應(yīng)用幾何變化來支持30%家具的簡單動畫：如自動旋轉(zhuǎn) - 渲染效果：為客廳環(huán)境設(shè)置合適的燈光效果 - 模型和場景外觀：實(shí)現(xiàn)合適的顏色和紋理映射，以支持視覺上吸引人的渲染輸出

2、功能說明

- 實(shí)現(xiàn)燈光效果 - 實(shí)現(xiàn)層次建模 - 實(shí)現(xiàn)紋理貼圖：家具貼圖 - 實(shí)現(xiàn)按鍵交互：按鍵控制改變視角 - 實(shí)現(xiàn)動畫效果：地球儀在旋轉(zhuǎn)，鐘表在轉(zhuǎn)動

3、操作說明

-按鍵A: 控制視角左轉(zhuǎn) -按鍵D: 控制視角右轉(zhuǎn) -按鍵W: 控制視角前進(jìn) -按鍵S: 控制視角后退

4、程序目錄截圖

5、部分代碼展示

//創(chuàng)建webgl上下文 function createGLContext(CanvasId) {var canvas = document.getElementById(CanvasId); //獲取<canvas>標(biāo)簽//如果沒找到<canvas>標(biāo)簽，則輸出錯誤信息if (!canvas){console.log('Failed to retrieve the <canvas> element.');return;}gl = canvas.getContext("webgl"); //獲取繪圖上下文，“webgl”代表我們用webgl繪制圖形。gl.viewportWidth = canvas.clientWidth;//屏幕的寬度gl.viewportHeight = canvas.clientHeight;//屏幕的高度return gl; } //主函數(shù) function main() {createGLContext("myCanvas");//1 、設(shè)置webgl上下文InitData(gl); //2、初始化數(shù)據(jù) 加載shader 紋理圖片 圖形數(shù)據(jù)等InitWebgl(gl);//3、初始化webgl狀態(tài)// 4、注冊響應(yīng)事件：鼠標(biāo) 按鍵 按鈕等{//添加鍵盤監(jiān)聽事件document.addEventListener('keydown',onDocumentKeyDown,false);document.addEventListener('keyup',onDocumentKeyUp,false);}// 5 啟動定時刷新，在定時器中的draw繪制tick(); }

6、運(yùn)行結(jié)果圖及整個代碼下載

總結(jié)

以上是生活随笔為你收集整理的webgl绘制客厅房间的家具+座椅板凳床的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。