Three.jsを使用してWebサイトに3D要素を追加する

公開: 2019-11-02

フラットデザインは素晴らしいですが、3D要素はウェブデザインのレイアウトを新しいレベルに引き上げます。アニメーションの3Dグラフィックとインタラクティブな3Dシーンを備えたWebサイトは、これまで以上に主流になりつつあります。クライアントは今、彼らのウェブサイトでそれらのタイプのデザインを望んでおり、彼らはあなたにそれらを求めます。 3DデザインをWebデザインプロジェクトに組み込む方法を学ぶことは、あなたのキャリアパスを改善し、より多くのクライアントを獲得するだけです。ありがたいことに、Three.jsのようなリソースは、Diviのデザイナーや開発者がカスタム3D要素をWebサイトに追加するために簡単に利用できます。

この投稿では、Three.jsの基本と、Webサイトに3D要素を追加するのに適している理由について説明します。はい、DiviのWebサイトですら。 Three.jsの使用を開始するには、コーディングの知識、特にHTML、CSS、およびJavascriptが必要です。まだコーディング方法を学んでいる場合は、Three.jsWebサイトのステップバイステップのチュートリアルを最初から実行してください。コードを追加する場所の用語が初めての場合は、技術的な手順を説明するために利用できるチュートリアルがたくさんあります。いくつかのビデオを見るか、SkillshareまたはUdemyのコースを受講して、Three.jsライブラリをデザインに組み込む方法を実際に理解することをお勧めします。

それを手に入れましょう。

Three.jsとは

まず、Three.jsとは何ですか？

Three.jsは、<canvas>、<svg>、CSS3D、およびWebGLレンダラーを提供するJavaScript3Dライブラリです。プラグインを必要とせずに、ブラウザに3Dデザインをもたらします。ライブラリは、単純な3D要素、複雑な3Dインタラクション、およびクリエイティブなアニメーションゲームの作成に役立ちます。 Three.jsは、ユーザーが独自のThree.js作成物を共有できるGithubリポジトリを備えたオープンソースライブラリです。

Three.jsがカバーするすべてのレンダラーの中で、最も一般的に使用されるのはWebGLです。 WebGLだけで3D要素を作成するには、多くのコード行と多くの数学的知識が必要です。 Three.jsを使用すると、シーンの作成とWebGLでのレンダリングがはるかに簡単になります。

3DシーンとThree.jsの用語を理解する

Three.jsを使用して3Dアニメーションを作成するには、最初に3Dシーンがどのように設定されているかを理解する必要があります。 3D設定を構築するために必要な3つの要素は次のとおりです。

シーン
カメラ
レンダラー

シーンは、Three.jsが表示するすべての3D要素を設定する場所です。視覚的には劇場の舞台やテレビに似ています。 カメラはシーンの視点であり、人間がシーン上の要素を技術的にどのように見るかを示します。 レンダラーはそれをすべてまとめてシーンを描画します。 3Dアニメーションに精通している場合は、これがシーンを設定するための標準として確実に認識されます。

シーンが設定されると、オブジェクトがそのシーンに配置されます。オブジェクトは3つのステップで構築されます。

ジオメトリ
素材
メッシュ

オブジェクトのジオメトリは、形状のスケルトンまたは基本的なアウトラインです。ジオメトリに色やテクスチャを与えるために、マテリアルが適用されます。ジオメトリとマテリアルの組み合わせはメッシュと呼ばれます。

Three.jsライブラリには、使用できる基本的なジオメトリがすでにたくさんあります。それらを最初から作成する必要はありません。それらをライブラリからコードに呼び出してからカスタマイズするだけです。色の16進コードをマテリアルとして使用する以外に、画像を使用してテクスチャを作成したり、テクスチャライブラリで検索したりできます。

シーンを設定してジオメトリを追加したら、シーンを照らしたり、オブジェクトをアニメートしたりするための関数を追加します。 Three.jsライブラリで利用可能な基本的なオブジェクトとは別に、オンラインライブラリまたはBlenderで作成したライブラリから他の3D画像をアップロードすることもできます。

Three.js入門

Three.jsに慣れることはこれほど簡単なことではありません。 Three.js Webサイトには、ライブラリがどのように機能し、どのように使用できるかを理解するために必要なすべてのドキュメントがあります。

Three.js WebサイトとそのGithubには、最も単純なThree.jsアプリケーションのコードのライブバージョンがあります。彼らはJSFiddleを使用していますが、CodePenまたはCodesandbox.ioで動作していることも確認できます。

Three.js Webサイトの手順に従って、すべてがどのように機能するかを実際に理解することをお勧めします。 Codepen、ターミナル、または優先コーディングソフトウェアのいずれかを使用します。 Three.jsライブラリ全体はThreejs.orgWebサイトで入手でき、シーンを設定して何ができるかに気づき始めたら使用できます。以下に、JSFiddleで動作する基本的なThree.jsアプリケーションを示します。「JSFiddleで編集」をクリックして、コードを試してみてください。

Three.js学習リソース

Three.jsはオープンソースAPIであるため、GitHubリポジトリでは常に何かが起こっています。つまり、学ぶべき新しいことが常にたくさんあるということです。ありがたいことに、彼らは変更のために絶えず更新されるデジタルマニュアルを作成しました。あなたはdiscoverthreejs.comでそれを見つけることができます。これは、これまでで最高のリソースです。アプリケーションのセットアップ方法とライブラリアセットの使用方法に関するステップバイステップのチュートリアルが必要な場合は、Three.jsドキュメントのすべてのステップを実行できるSkillshareの優れたコースをご覧ください。

同様に、このYouTubeチュートリアルでは、Three.jsを使用してシーンを設定する基本を示していますが、基本的なWeb開発スキルを知っていることを前提としています。

Three.jsとWebGLを深く掘り下げたい場合は、このUdemyコースですべてを説明し、最後までに3Dコンテンツの作成に堪能になることをお約束します。

ざらざらした、迅速で汚いチュートリアルをお探しですか？ CreativeBloqに関するこのステップバイステップのコードチュートリアルは、まさに必要なものです。

Three.jsの例

Three.jsを使用して独自の3Dデザインのデザインを開始するためのインスピレーションに勝るものはありません。非常に素晴らしいThree.jsの作品を見るには、彼らのWebサイトにアクセスして探索してください。

DiviでThree.jsを使用する

DiviでThree.jsを使用するのは非常に簡単です。 javascriptライブラリをプロジェクトファイルに追加し、それをHTMLに追加するだけです。 Diviレイアウトにアプリケーションを追加するには、まず、お気に入りのコーディングソフトウェアまたはコンピューターの端末で3Dデザインを個別に作成します。ビルドの準備ができたら、JavaScriptをコードモジュールにコピーします。必ず開始タグと終了タグを使用してください。

結論

Three.jsは、Webサイトに3D要素を追加するための強力なリソースです。この投稿では、Three.jsがどのように機能するかについての基本的なことを説明しました。 APIには非常に多くのことがあるので、実際に深く掘り下げて実験する必要があります。可能性は本当に無限大です。単純な回転する立方体から、豊かなデジタル世界の中での複雑なインタラクティブゲームまで。 Three.jsで何を作成しますか？

theromb /shutterstock.com経由の注目の画像