動作中のThree.jsの10の見事なオープンソースの例

クレイジーに見えるかもしれませんが、実際にはJavaScriptを使用して3Dオブジェクトを作成できます。 ほとんどのWeb開発者は、これを実現するためにThree.jsなどのライブラリに依存しています。

しかし、それは非常に詳細なプロセスであるため、誰もがわざわざ調査するわけではありません。 さて、3D JSに興味があるなら、学ぶための最良の方法は他の人を勉強することです。 だからこそ私はこのギャラリーを作りました。

これらは、CodePenでホストされていると私が見つけた最高のThree.jsプロジェクトの一部です。 彼らはあなたの創造的なモーターを回転させるであろうたくさんの異なったスタイルと特徴を特徴とします。

1.低ポリアース

単一のHTML要素と数十行のCSS/JSで、開発者SamSacconeによるこの低ポリゴンEarthがあります。

最初はそれほど多くないように思われるかもしれません。 しかし、これは私が見た中で最も顕著なアイデアの1つであり、カスタムアニメーション効果も使用しています。 陸塊は地球から突き出ており、はるかにリアルな外観を与えています。

以前にThree.jsを使用したことがある人なら誰でも、これがどれほど素晴らしいかを知っているはずです。

これは確かに、同様のプロジェクトよりもはるかに進んでいます。主に、コードベースが小さいためです。

2.球

この奇妙な惑星のようなプロジェクトも、かなりきちんとした効果を持つThree.jsを使用しています。 Spheresは、CSSにインポートされたStylusプリプロセッサで実行されます。

また、HTMLなしで実行されるため、これは注目に値します。 それはすべてJS、すべて3Dであり、すべての最新のブラウザーで完全に実行されます。

小さい球は、JSライブラリの幾何関数を使用して大きい球の上を滑空します。 これが可能であることに気が狂っているように見えますが、それは私たちがCSSをどこまで持ってきたかの証です。

3.惑星の自転

さらに小惑星のアイデアに入ると、開発者のブライアン・ジョーンズによって作成されたこのクレイジーな回転銀河があります。

また、Three.jsといくつかの基本的なCSSだけを使用して、惑星のスタイルと整理を行います。 私が言わなければならないのは、3D効果は驚くべきことです。 私はまだ、このようなことが典型的なWebブラウザで可能であるという事実に頭を悩ませることはできません！

しかし、Three.jsの領域で始めたばかりの場合は、このCodePenスニペットが優れた学習支援であることは否定できません。

4.Three.jsのツリーハウスロゴ

オンライン学習リソースTreehouseは、特に初心者にとっては驚異的です。 彼らのインストラクターの1人であるNickPettitは、実際にThree.jsを使用して完全なTreehouseロゴを作成しました。

そして、これは素晴らしいことだと言わせてください！ 私はこのような設定を見たことがなく、そのような詳細なコメントのあるペンを見ることはめったにありません。 Nickのコードを使用すると、掘り下げて、理解できない関数を見つけて、Googleに回答を求めるのがはるかに簡単になります。

この3Dロゴに関するすべてのことは、現代のJSが時代遅れではないことを証明するはずです。

ヒント：画面上でクリック+ドラッグしてロゴを回転させてみてください。 楽しいもの！

5.木製バレル

NickPettitが純粋なJSコードだけを使用して開発した別のクレイジーなスニペットを次に示します。 HTMLもCSSもありません–すべてがJavaScript言語でレンダリングされます。

当然、これはJavaScript内で生成できるcanvas要素に依存しています。 私はそれを少し自分で使用しましたが、このレベルには決してなりませんでした。 確かな3Dライブラリでどれだけのことができるかを示しています。

そしてそれはまたニックが本当に教える方法を知っていることを証明します。 これは彼のCodePenアカウントにある多くのサンプルの1つにすぎません。これらはすべて、学習しながらコメントを読みやすくしています。

6. Three.js + TweenMax

開発者のMartandKashyapは、TweenMaxスクリプトとThree.jsを組み合わせて、このクレイジーなものを作成しました。

これは、このリストで最もユニークなペンの1つであり、いくつかのクールなアニメーション効果があります。 パネルは実際には平らな2Dサーフェスのように見えますが、反転アニメーションは自然な3D効果を作成します。 あなたがそれを十分長く見つめるならば、それはかなり狂気になります。

これは実際には、マータンドがJavaScriptに変換したモーショングラフィックプロジェクトに基づいていました。 私はこれをもっと頻繁に見ています、そしてそれはかなり印象的です。

7.パーティクルスターフィールド

2Dサーフェス上のモーションの概念は、あらゆる種類の視差設計を思い起こさせます。 これらは、JavaScriptの実験的な機能を何度も使用して、Web全体で見つけることができます。

そして、CodePenからのこのスニペットは、そのようなアイデアを収集するのに素晴らしいものではありません。 さまざまなズーム速度、横方向のパン、その他の関連機能を備えた、かなりクレイジーなアニメーションがあります。

パーティクルは動的に生成され、ページの任意の場所をクリックしてズームインできます。これは、私たちが住んでいるものと同じように、終わりのないスペースの欠如のように感じます。しかし、これは純粋なJSコードで作成されています。

8. Haml Cubes

さらに回転するジオメトリについては、これらのThree.jsキューブを確認してください。 それらは、最大100行のJavaScriptとともにHamlテンプレート言語で実行されます。

おそらく、このデザインの最も印象的な部分は、シェーディング効果です。 これはあまり見られませんが、ブラウザでリアルな3D効果を作成するための最良の方法の1つです。

ありがたいことに、適切なスニペットを使用して、Three.jsを介してすべてを処理できます。 そして、これはその目的のための素晴らしいテンプレートとして機能することができます。

9.正八胞体

Mike Feyは、3D空間でレンダリングされたこの信じられないほど複雑な正八胞体を開発しました。 実際には、3D空間に編成された展開された立方体のように見えます。これは、立方体内の立方体のようなものです。

ただし、このデモを実行するには多くのライブラリが必要であることに注意してください。 Mikeには、jQuery、jQuery UI、ThreeJS、TweenJS、およびCubeJSスクリプトを備えた5つの異なるJSスクリプトがあります。 後者の3つは彼の個人サイトでホストされており、自由にアクセスできるはずです。

このプロジェクトが現実の世界で価値があるとは言えません。 しかし、3D空間ジオメトリに飛び込みたいのであれば、それは学習リソースの1つの地獄です。

10.3Dシャード

開発者のTobiasDuhrは、ThreeJSで可能なことのサンプルとしてこれらの3Dシャードを作成しました。 これらは、形状が異なり、シェーディングもなくなっていることを除いて、前述の回転する立方体のように機能します。

どこから始めればよいかわからない場合は、これがThreeJSを学ぶためのより簡単なイントロだと思います。 確かに、これはチュートリアルではないため、他のリソースのように教えることはできません。

しかし、このコードを研究するだけで、あなたはあなた自身の仕事のためのいくつかの新しく発見されたアイデアを手に入れるでしょう。

11.3Dピタゴラスの木

この3Dピタゴラスの木は単に素晴らしいです。 開発者のJosepLlodraは、Three.jsライブラリと一緒にわずか150行のJavaScriptでこのプロジェクトを作成しました。

実は先ほど申し上げたこのプロジェクトに基づいています。 基本的に、これらのキューブを単一の定義された形状に構造化し、サイズと位置に基づいて整理します。

Three.jsで何ができるかわからない場合は、このギャラリーが少しインスピレーションを与えてくれることを願っています。 しかし、周りを見回したいのであれば、CodePenでいつでももっと見つけることができます。