10 個令人驚嘆的 Three.js 開源示例

這可能看起來很瘋狂，但實際上您可以使用 JavaScript 構建 3D 對象。 大多數 Web 開發人員都依賴 Three.js 之類的庫來完成此任務。

但這是一個如此詳細的過程，並不是每個人都願意去研究它。 現在，如果你對 3D JS 的東西感到好奇，最好的學習方式就是學習其他人。 這正是我製作這個畫廊的原因。

這些是我可以在 CodePen 上找到的一些最好的 Three.js 項目。 它們具有一系列不同的風格和特徵，可以讓您的創意馬達加速運轉。

1.低聚地球

通過一個 HTML 元素和幾十行 CSS/JS，我們擁有了開發人員 Sam Saccone 開發的這個低多邊形地球。

一開始可能看起來並不多。 但這是我見過的比較突出的想法之一，它甚至使用了自定義動畫效果。 陸地甚至從地球上伸出，使其外觀更加逼真。

任何使用過 Three.js 的人都應該知道這有多棒。

它肯定比類似項目領先一步——主要是因為它的代碼庫更小。

2. 球體

這個奇怪的類似行星的項目也使用了 Three.js，效果非常好。 Spheres 在 Stylus 預處理器上運行，您可以看到它已導入 CSS。

它也可以在沒有 HTML 的情況下運行——這確實讓人眼前一亮。 它全是 JS，全是 3D，並且可以在每個現代瀏覽器中完美運行。

使用 JS 庫中的幾何函數，較小的球體在較大的球體上滑動。 這似乎很瘋狂，這甚至是可能的，但這證明了我們在 CSS 方面已經走了多遠。

3. 行星自轉

深入了解小行星的想法，我們得到了由開發人員 Bryan Jones 創建的這個瘋狂的旋轉星系。

它也只使用了 Three.js 和一些基本的 CSS 來設計和組織行星。 不得不說，3D效果讓人驚喜。 我仍然無法理解這樣一個事實，即這些東西在典型的網絡瀏覽器中是可能的！

但不可否認，如果您剛開始在 Three.js 領域工作，那麼這個 CodePen 片段是一個很好的學習助手。

4. Three.js 中的 Treehouse Logo

在線學習資源 Treehouse 非常棒——尤其是對於新手而言。 他們的一位講師 Nick Pettit 實際上使用 Three.js 創建了一個完整的 Treehouse 徽標。

讓我說這件事太棒了！ 我從未見過這樣的設置，也很少看到有如此詳細評論的筆。 Nick 的代碼讓你更容易深入挖掘，找到你不理解的功能，然後在谷歌上尋找答案。

關於這個 3D 標誌的一切都應該證明現代 JS 遠未過時。

提示：嘗試單擊+拖動屏幕以旋轉徽標。 好玩的東西！

5. 木桶

這是 Nick Pettit 僅使用純 JS 代碼開發的另一個瘋狂片段。 沒有 HTML，沒有 CSS——一切都是通過 JavaScript 語言呈現的。

當然，這依賴於您可以在 JavaScript 中生成的 canvas 元素。 我自己也用過一點——但從來沒有達到這個水平。 它顯示了你可以用一個堅實的 3D 庫做多少。

這也證明了尼克真的會教書。 這只是他的 CodePen 帳戶中的眾多示例之一——所有這些示例都有易於閱讀的評論，供您隨時學習。

6. Three.js + TweenMax

開發人員 Martand Kashyap 將 TweenMax 腳本與 Three.js 結合在一起，創造了這個瘋狂的東西。

它是此列表中較為獨特的筆之一，具有一些很酷的動畫效果。 面板實際上看起來像平面的 2D 表面，但翻轉動畫創造了自然的 3D 效果。 如果你盯著它看足夠長的時間，它會變得非常瘋狂。

這實際上是基於 Martand 轉換為 JavaScript 的動態圖形項目。 我經常看到這種情況，而且令人印象深刻。

7.粒子星域

2D 表面上的運動概念讓人想起各種視差設計。 你會在整個網絡上找到這些，很多時候使用 JavaScript 中的實驗性功能。

CodePen 的這個片段對於收集這些想法來說非常棒。 它有一個非常瘋狂的動畫，具有不同的縮放速度、橫向平移和許多其他相關功能。

粒子是動態生成的，您可以單擊頁面上的任意位置進行放大。這感覺就像一個永無止境的空間虛空——就像我們生活的那個一樣。但是這個是用純 JS 代碼創建的。

8. 哈姆立方體

如需更多旋轉幾何，請查看這些 Three.js 立方體。 它們在 Haml 模板語言和大約 100 行 JavaScript 上運行。

也許這個設計最令人印象深刻的部分是陰影效果。 您不會經常看到這種情況，但它是在瀏覽器中創建逼真的 3D 效果的最佳方式之一。

幸運的是，您可以通過 Three.js 處理這一切——使用正確的代碼片段。 這個可以作為一個很好的模板來達到這個目的。

9. 正方體

Mike Fey 開發了這個在 3D 空間中渲染的極其複雜的 tesseract。 它實際上看起來更像是一個組織成 3D 空間的展開立方體——有點像立方體中的立方體。

但請注意，此演示需要大量庫才能運行。 Mike 有五個不同的 JS 腳本，包括 jQuery、jQuery UI、ThreeJS、TweenJS 和一個 CubeJS 腳本。 後 3 個託管在他的個人網站上，應該可以免費訪問。

我不能說這個項目在現實世界中會被證明是有價值的。 但是，如果您想深入研究 3D 空間幾何，這將是一種極好的學習資源。

10. 3D碎片

開發人員 Tobias Duhr 構建了這些 3D 碎片作為 ThreeJS 中可能實現的示例。 它們就像前面提到的旋轉立方體一樣工作，除了形狀不同並且陰影也消失了。

如果您不確定從哪裡開始，我會認為這是學習 ThreeJS 的一個更簡單的介紹。 當然，這不是一個教程，所以它不能像其他資源那樣教你。

但是，僅僅通過研究這段代碼，你就會對自己的工作產生一些新的想法。

11. 3D畢達哥拉斯樹

這棵 3D 畢達哥拉斯樹簡直令人驚嘆。 開發人員 Josep Llodra 僅用 150 行 JavaScript 代碼以及 Three.js 庫創建了這個項目。

它實際上是基於我之前提到的這個項目。 基本上，它將這些立方體構造成一個定義的形狀，然後根據大小和位置組織它們。

如果你不確定可以用 Three.js 做什麼，那麼我希望這個畫廊能提供一點靈感。 但是，如果您願意四處看看，您總能在 CodePen 上找到更多信息。