JavaScript >> Javascript 文檔 >  >> Tags >> WebGL

用 Three.js 學習 WebGL 的 20 個令人印象深刻的例子

到目前為止,您可能已經聽說過 Three.js - 一個使在瀏覽器中使用 3D 變得容易的庫。有了它,您可以創建 3D 建模的構建塊 - 相機、網格、燈光等,並在其上應用動畫。 Three.js 可以使用 Canvas 元素、SVG、CSS3D 或 WebGL 繪製場景。

在本文中,您將找到一系列演示、教程和資源,這些將激發您了解有關該庫的更多信息。

實驗和演示

您在下面看到的令人印象深刻的演示是使用 Three.js 庫和 WebGL 作為渲染器製作的。可以直接使用 WebGL,但選擇 Three.js 使開發更容易,並且只需要一小部分代碼。以下是圖書館可以做的一些事情:

1。核

Nucleal 是一個 WebGL 實驗,由 Three.js 提供支持。它將照片分解成數千個被物理轉換的粒子。您可以選擇照片、速度和效果的任意組合。動畫流暢,讓人印象深刻。

2。燈

Lights 是一種令人驚嘆的視覺體驗,由 Three.js 提供支持,可將顏色和形狀與音樂同步。你飛過一個充滿彩色形狀的場景,你可以通過點擊與之交互。建議使用耳機。

3。只是一個反射器

“Just A Reflektor”是一部互動電影,您只需將移動設備放在計算機網絡攝像頭前,即可在計算機屏幕上投射虛擬投影。這樣,您可以通過在您周圍的物理空間中移動手機或平板電腦來控制體驗中的所有視覺效果。在技​​術頁面和幕後視頻中查看一些驚人的效果。

4。武器地球儀

Arms Globe 是一個可視化實驗,它將小型武器和彈藥的世界貿易疊加在一個可以在 3D 空間中旋轉的地球模型上。您可以按年份和彈藥類型過濾數據集。可視化效果非常好,運行流暢。

5。 Google 街景延時攝影

該實驗下載兩個目的地之間的谷歌街景數據,並將其轉換為旅行的動畫。您可以暫停並環顧四周,也可以在右上角的地圖上拖動相機將跟隨的目標。給它幾分鐘來加載或觀看此視頻以查看它的實際效果。

6。找到通往奧茲的路

這是 Oz the Great and Powerful 電影的宣傳網站。它將精美的藝術品與 HTML5 和 WebGL 相結合,形成身臨其境的體驗。它從電影一開始就發生在馬戲團裡。您可以與環境互動並使用網絡攝像頭。

7。谷歌時代精神

谷歌 2012 年的時代精神包括一個由 WebGL 提供支持的世界地圖,展示了過去一年的搜索趨勢和重要事件。點擊“Watch the year in review”按鈕即可查看。

8。鐵毒

Ironbane 是一款由 WebGL 和 Three.js 提供支持的大型多人在線遊戲。您可以收集物品、與其他玩家互動並探索開放世界。遊戲採用了受Minecraft啟發的複古風格,運行流暢。該遊戲是開源的,客戶端和服務器端都是用 JavaScript 編寫的。不用開戶也能玩,自己快來試試吧。

9。魔方大滿貫

Cube Slam 是這個列表中我最喜歡的 Three.js 驅動的遊戲。它是經典乒乓球遊戲的翻版,但將其移至 3D 空間。你可以和你的朋友或電腦控制的熊對戰。該遊戲使用 WebRTC,因此您可以看到朋友網絡攝像頭的視頻。如需了解幕後花絮,請通讀其中一位創作者的這篇博文。

10. HexGL

HexGL 是一款在 Three.js 的幫助下使用 HTML5、JavaScript 和 WebGL 構建的未來主義快節奏賽車遊戲。這是對原始 Wipeout 和 F-Zero 系列的致敬。這是一款圖形繁重的遊戲,接近幾年前的桌面遊戲水平。幸運的是,您可以在播放之前降低細節級別。這是遊戲作者的視頻,解釋了他是如何製作遊戲的。

11. Chrome 世界迷宮

這是 Google 的一項 Chrome 實驗,可讓您將任何網頁變成一個 3 維迷宮,您可以在其中移動球。更酷的是,球是通過智能手機控制的。

12. HelloRun

HelloRun 是一款由 Three.js 提供支持的 WebGL 遊戲,它讓你置身於宇宙飛船的船體中,並迫使你通過跨越障礙找到自己的方式。遊戲具有出色的視覺效果,並逐漸加快速度並變得更加困難。

13.你好賽車手

Hello Racer 是令人印象深刻的一級方程式賽車可視化,由 WebGL 和 Three.js 提供支持。它具有栩栩如生的反射和陰影。你甚至可以用 WASD 鍵來驅動它。

14. 360 汽車展示台

這是另一個具有詳細汽車可視化功能的實驗。這次你可以選擇車型和顏色。動態應用顏色並更新所有紋理以匹配。

15.谷歌地圖立方體

Google Maps Cube 是一款向您展示 3D 地圖立方體的遊戲。你的工作是導航球穿過城市並到達檢查站。

16. CSS3D 元素週期表

這是 Three.js 的一個令人印象深刻的演示。這個實驗沒有使用 WebGL,而是使用 CSS3D 來渲染化學元素框。您可以在四種佈局中進行選擇:表格、球體、螺旋和網格。

17. WebGL 地球儀

WebGL Globe 是一個可視化實驗,類似於手臂地球儀,將數據疊加在漂浮在 3d 空間中的地球儀上。此示例以城市人口為中心,但您可以在此處查看具有不同數據集的版本。

18.黑曜石

Obsidian 是一個 WebGL 演示,可將浮動形狀和顏色與音樂同步。雖然底部有一個滑塊,但這不是視頻——效果是實時生成的。

19.因陀羅之網

這個演示展示了一個多維的雨滴網絡,它們相互反映以及它們周圍的世界。雖然涉及的對象非常多,但渲染速度還是蠻快的。

20。行星製造者

Planet Maker 是一個由 WebGL 和 Three.js 提供支持的網絡應用程序,可讓您創建真實或虛構的行星。您可以從多個表面紋理選項中進行選擇、調整照明和氛圍、添加或移除雲層、上傳您自己的圖像,或者在它們周圍環繞。

獎勵:WebGL Nyan Cat

坦率地說,沒有一隻貓,任何 WebGL 資源的集合都是不完整的。享受吧!

在這裡找到更令人印象深刻的 WebGL 演示:

  • http://www.chromeexperiments.com/tag/webgl/
  • http://threejs.org/
  • http://www.mrdoob.com/

教程和示例

既然您在 Three.js 上銷售,您從哪裡開始?這裡有一系列教程、示例、演示文稿和視頻,可幫助您入門。

開始

  • WebGL 簡介 - 這是一個包含實時代碼示例的演示文稿,將向您介紹 WebGL 和 Three.js。
  • Three.js 入門 - 一個很好的教程,介紹了使用該庫進行 3D 建模的基礎知識。它易於閱讀,適合初學者。
  • 入門 - 這是官方的入門教程。它解釋了運行 Three.js 的基礎知識。
  • Creating Particles With Three.js - Paul Lewis 的另一個教程,他解釋瞭如何開發一個很酷的粒子系統(演示)。
  • WebGL 學院 - 如果您想學習純 WebGL,不使用 Three.js,您可以按照此分步指南進行操作。在這裡,您可以在編輯器中編寫代碼並查看結果的實時預覽。

示例

  • Basic Three.js 示例 - 這些示例對初學者友好,易於理解且文檔齊全。完成入門帖子後,從此頁面開始。
  • Stemkoski 的三個.js 示例 - 此頁面可能看起來像是來自 90 年代後期,但實際上非常相關。它包含大量 Three.js 示例和完整註釋的源代碼,涵蓋了廣泛的主題。
  • 官方 Three.js 示例 - 這些示例演示了庫的每個部分。遺憾的是,源代碼缺少註釋,有時可能難以理解。

視頻

  • WebGL 技術和性能是來自 Google I/O 的長達一小時的演示文稿,其中涵蓋了很多主題。
  • WebGL 101 是一個非常適合初學者的教學視頻,也專注於 WebGL。
  • Three.js 簡介是一個 36 分鐘的演示文稿,面向希望了解 Three.js 的初學者。

更多資源

  • 官方 Three.js 參考 - 您應該將其添加為書籤,並始終在標籤中打開它。
  • 官方 wiki - 包含一個常見問題解答部分以及指向您可能會發現有用的各種文章和其他資源的鏈接。
  • Learning Three.js - 這是一個致力於發布 Three.js 教程的博客。每篇博文都說明瞭如何製作您在整個網絡上看到的流行演示之一。
  • Three.js Editor - 這是 Three.js 的代碼編輯器,具有實時預覽功能。您可以使用它來快速嘗試使用庫。您可以與他人分享您的實驗並保存您的進度。
  • 替代文檔 - 這是庫中所有方法的自動生成索引。
  • Google+ 頁面 - 在這裡您可以找到有關圖書館的最新消息和鏈接。
  • SO 問題,標記為three.js。現在通讀最熱門的問題和答案將為您節省時間,避免日後的麻煩。
  • WebGL Subreddit - 這不僅關注 three.js,但仍然值得瀏覽。

你知道這裡應該包括的其他資源嗎?在評論部分分享它們。


下一篇
No
Tutorial JavaScript 教程
  1. 比較 React Router 5、6 和 React Location

  2. 將參數傳遞給ajax onreadystatechange回調?

  3. 作為 Web 開發人員必須檢查的 3 大在線代碼編輯器

  4. 我在 40 小時內從 Angular 切換到 React 學到了什麼!

  5. mojo.js 1.0 - 從 Perl 到 Node.js

  6. 串行執行與同時執行的 async/await JavaScript 函數數組

  7. 從節點服務器發出一堆請求?試試 Promise.all!

  1. 如何將服務器錯誤檢測到 jquery ajax 調用中?

  2. 自製 React Hooks:useIsKeyPressed

  3. React Virtuoso - 一個優雅的虛擬列表組件

  4. Ember Octane 升級如何將值從組件傳遞到控制器

  5. 使環境變量在前端容器中可訪問

  6. 如何獲取當前javascript文件名的絕對路徑

  7. Sweet &Sour mongoose.js 方法 – 3

  1. 在 Node.js 中實現 OAuth 2.0

  2. 如何在 Heroku 上使用 MongoDB Atlas 數據庫託管 RESTful Node.js 服務器

  3. PolymerJS 和 LitElement 入門

  4. 匿名函數 JavaScript:編碼概念 - 匿名函數