從文字到圖片，再到視頻、游戲、虛擬現(xiàn)實(shí)世界等，瀏覽器在不斷地支持更多的展現(xiàn)方式。例如，你不滿足于 2D 游戲在網(wǎng)頁上帶來的體驗(yàn)，想開發(fā)一款 3D 游戲增加用戶的視覺體驗(yàn)，那么 WebGL 技術(shù)的誕生便可以支持 Web 開發(fā)人員借助系統(tǒng) GPU 的能力，在瀏覽器中展示各種 3D 場景和模型。

使用基于 WebGL 的技術(shù)，目前的應(yīng)用已經(jīng)越來越豐富了。不僅僅在游戲，在家居、虛擬現(xiàn)實(shí)、城市地圖等領(lǐng)域也在發(fā)揮它的作用。并且，隨著 WebGL 規(guī)范的完善，越來越多瀏覽器已經(jīng)全方位地支持 WebGL 了，如今已經(jīng)有大量豐富的例子供開發(fā)者學(xué)習(xí)，好的 3D 應(yīng)用在騰訊開放平臺(tái)上能夠帶來不錯(cuò)的廣告投放和訪問量，也會(huì)收到不錯(cuò)的回報(bào)

Three.js 是 Github 上的開源項(xiàng)目。通常在 WebGL 中，如果你要通過矩陣變換坐標(biāo)，將三維坐標(biāo)轉(zhuǎn)變?yōu)槠聊簧系亩S坐標(biāo)，是要自己去完成的。而在 Three.js 中，它能幫我們自動(dòng)計(jì)算矩陣，將三維坐標(biāo)轉(zhuǎn)換為二維坐標(biāo)，這就簡化了很多復(fù)雜的工作。

再例如，WebGL 學(xué)習(xí)到深入階段，需要掌握 Javascript 和 GLSL 兩種語言才能進(jìn)行著色器的開發(fā)。但是，使用 Three.js 顯然可以跳過這些難懂的底層知識(shí)。Three.js 作為一款前端 3D 引擎，其應(yīng)用范圍越來越廣，不管是房產(chǎn)網(wǎng)站的 3D 看房，還是購物網(wǎng)站的 3D 模型預(yù)覽，都能用到 Three.js。

最新Three.js3D課程內(nèi)容

《手把手帶你玩轉(zhuǎn)Three.js元宇宙3D開發(fā)》

這套課程可以帶你快速學(xué)習(xí) Three.js，擁有開發(fā)三維動(dòng)畫和游戲、三維地圖的能力。

在本門課程中，我們提供了大量的案例，這些案例能幫助你快速學(xué)習(xí) Three.js ，并掌握其中的基礎(chǔ)知識(shí)。Three.js 已成為前端工程師的一項(xiàng)特殊技能，在面試過程中能讓面試官眼前一亮，助你升職加薪！

1.1 課程介紹

2.1 three.js官網(wǎng)部署

2.2 three.js官網(wǎng)部署

2.3 搭建開發(fā)環(huán)境介紹

2.4 搭建開發(fā)環(huán)境-演示

3.1 起步案例-基礎(chǔ)概念

3.2 起步案例-實(shí)現(xiàn)思路

3.4 起步案例-演示（上）

3.5 起步案例-演示（下）

3.6 起步案例-渲染優(yōu)化

4.1 顯示坐標(biāo)系-介紹

4.2 顯示坐標(biāo)系-演示?

4.3 軌道控制器-介紹

4.4 軌道控制器-演示

4.5 自適應(yīng)畫布

5.1 網(wǎng)格輔助工具

5.2 網(wǎng)格輔助工具-演示

5.3 基礎(chǔ)變換-介紹

5.4 基礎(chǔ)變換-演示

5.5 集成GUI工具

6.1 物體網(wǎng)格概述

7.1 立方體介紹

7.2 立方體代碼演示

7.3 基本球體實(shí)現(xiàn)

7.4 Gui工具封裝

7.5 基礎(chǔ)平面實(shí)現(xiàn)

7.6 緩沖區(qū)幾何體

8.1 基礎(chǔ)材質(zhì)

8.2 Gui擴(kuò)展-支持材質(zhì)設(shè)置

8.3 法向材質(zhì)

8.4 PBR材質(zhì)

9.1 普通紋理貼圖

9.2 凹凸紋理貼圖

9.3 法向紋理貼圖

9.4 環(huán)境紋理貼圖

10.1 場景概述

10.2 背景顏色

10.3 單一圖片

10.4全景圖

10.5 HDR圖

10.6 環(huán)境屬性

10.7 霧化

11.1 相機(jī)概述

11.2 相機(jī)參數(shù)

11.3 調(diào)整視點(diǎn)

11.4 調(diào)整觀察點(diǎn)

11.5 實(shí)時(shí)渲染

11.6 正交相機(jī)參數(shù)

11.7 正交相機(jī)實(shí)時(shí)渲染

12.1 光線與陰影概述

12.2 環(huán)境光

12.3 聚光燈屬性

12.4 聚光燈陰影效果

12.5 點(diǎn)光源屬性

12.6 點(diǎn)光源陰影效果

12.7 平行光屬性

12.8 平行光陰影效果

13.1 3D模型格式介紹

13.2 加載obj文件

13.3 加載gltf文件

14.1 精靈與粒子簡介

14.2 精靈對(duì)象

14.3 粒子對(duì)象

14.4 模擬下雨-基本邏輯

14.5 模擬下雨-添加紋理

14.6 模擬飄雪

15.1 setInterval實(shí)現(xiàn)動(dòng)畫

15.2 request Animation Frame實(shí)現(xiàn)動(dòng)畫

15.3 tween js體驗(yàn)

15.4 tween js集成到項(xiàng)目

15.5 骨骼動(dòng)畫

15.6 加載外部動(dòng)畫

最新Three.js3D開發(fā)課程介紹

課程技術(shù)點(diǎn)：

Html+Css+JavaScript+Three.js

授課講師：李老師? 高級(jí)講師

◆中地?cái)?shù)碼集團(tuán)高級(jí)講師

◆國家高級(jí)信息系統(tǒng)項(xiàng)目管理師

◆10年IT教學(xué)經(jīng)歷，IT教學(xué)名師注重基礎(chǔ)，對(duì)前端框架Vue、React、Angular等主流技術(shù)有深入研究，靈活耐心，具體很強(qiáng)的親和力，認(rèn)真負(fù)責(zé)，實(shí)戰(zhàn)經(jīng)驗(yàn)豐富，熱衷探索新技術(shù)，授課富有激情又通俗易懂，知識(shí)點(diǎn)分析深入。

◆對(duì)學(xué)生學(xué)習(xí)狀態(tài)的起伏感知非常強(qiáng)，擅長通過貼近生活不乏幽默的舉例，引發(fā)學(xué)員的興趣，引導(dǎo)學(xué)生思維。課堂幽默生動(dòng)，思維行云流水，授課水到渠成。

課程適合對(duì)象：

適合零基礎(chǔ)入門3D開發(fā)的同學(xué)

該課程需要有一定的前端開發(fā)基礎(chǔ)

課程優(yōu)勢：

1. 適合零基礎(chǔ)學(xué)員：課程由淺入深，技術(shù)點(diǎn)內(nèi)容數(shù)量由小到大，逐步掌握技術(shù)在項(xiàng)目場景下的應(yīng)用。

2. 企業(yè)級(jí)項(xiàng)目實(shí)戰(zhàn)：整體課程以案例的形式授課，幫助學(xué)生將理論和實(shí)踐相結(jié)合，達(dá)到學(xué)以致用，舉一反三的功效。

3. 課程提供全程指導(dǎo)：課程授課中，講師答疑輔導(dǎo)，實(shí)時(shí)幫助學(xué)生解決學(xué)習(xí)過程中遇到的問題。

4. 一線大咖講師，提高技術(shù)思維：中地?cái)?shù)碼一線工程師親授技術(shù)精華、剖析前沿案例，直擊技術(shù)要點(diǎn)

課程服務(wù)：

1. 答疑服務(wù)：講師答疑，答你所疑——項(xiàng)目課程授課中，講師答疑輔導(dǎo)，實(shí)時(shí)幫助學(xué)生解決學(xué)習(xí)過程中遇到的問題。

2. 筆記鞏固：邊學(xué)邊記，隨用隨查——總結(jié)出專屬于你自己的技術(shù)手冊，項(xiàng)目方案

3. 資料總結(jié)：讓你的學(xué)習(xí)“豐富”又“便捷”——配套教輔一樣不少：講師源碼、工具素材、配套教輔、Git倉庫

4. 課程回放：一次購買可以重復(fù)學(xué)習(xí)——提供課程全部視頻課程，學(xué)員可在司馬云平臺(tái)重復(fù)學(xué)習(xí)

購買課程附送配套課程筆記、進(jìn)入專屬答疑群