2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
ログミーTech 用語解説「Three.js」(全1記事)
リンクをコピー
記事をブックマーク
Three.jsは、Webブラウザ上で3DCGを簡単に表示できるJavaScriptライブラリです。JavaScriptの基本的な知識があれば、Three.jsを用いてWebブラウザ上に3Dモデルや3Dアニメーションを簡単に表示できるようになります。
もともと、Webブラウザ上で3DCGを扱う技術に「WebGL」というものがありました。これは「Flash Player」のような外部プラグインを用いずに3DCGや2DCGを描画できる、マルチプラットフォームのJavaScript APIです。WebGLもJavaScriptを使うことに変わりはないのですが、WebGLを扱うには3DCGに関する専門知識やスキルが必要となり、気軽に始められるものではありませんでした。
WebGLで必要となる3DCGの専門知識を上手く抽象化し、「オブジェクトを置く」「ライトを置く」「カメラを置く」といった、直感的でわかりやすい表現でコーディングできるようにしたものがThree.jsです。
Three.jsの特徴としては、次のものが挙げられます。
「軽量で使いやすい」という特徴により、Three.jsはWebブラウザ上でスムーズに動作します。プラグインなどを必要としないため、Webブラウザが動くデバイスであればパソコンでもスマホでも実行環境を問わないところが大きな利点です。また、初心者でも比較的簡単に3DCG表示までたどり着けるので、モチベーションを保ちながら学習を進めていくことができます。
「豊富な機能」について、Three.jsは3DCG表現に必要な様さまざまな機能を備えています。さまざまな形式の3Dモデル読み込み、テクスチャなどのマテリアル表現、カメラ操作、アニメーション作成、インタラクション実装など、幅広い用途に3DCG表現を活用できる機能が揃っています。
「活発なコミュニティ」について、Three.jsは2010年4月に公開され、現在も開発が進められている活発なライブラリです。その間、数多くのチュートリアルやサンプルコードが公開され、フォーラムなどでも多くの情報が蓄積されてきました。学習リソースが豊富に存在しているのも大きな特徴といえるでしょう。
【関連記事】
Three.jsはWebブラウザ上で3DCGを表現するためのJavaScriptライブラリです。3D表現はさまざまなコンテンツにおいて、視覚的な効果を高めてくれるでしょう。ここでは、代表的な使用例をいくつか紹介します。
「3Dモデルの展示」では、Three.jsを使って3Dモデルをインタラクティブに展示できます。ユーザーは、モデルを回転させたり、拡大・縮小したりと、さまざまな角度から見ることができます。
「3Dアニメーション効果」は、Webサイトに動きのあるコンテンツを付与します。マウスカーソルの動きやページスクロールに合わせて3Dアニメーション効果を加えることで、ユーザーの視覚的な訴求を高められます。
「3Dゲーム」は、Webブラウザ上で動く3Dゲームです。「3Dグラフ」は、Three.jsを用いてグラフの3D化を行います。複雑なデータを視覚的にわかりやすくすることで、データ分析の手助けになります。
「3D地図」では、建物の高さや地形が3Dで表現されることで、地理情報をわかりやすく表示できます。
「VR/AR」では、スマホやヘッドセットを使用して仮想空間に入り込んだような体験を得られます。「VR/AR」コンテンツの3DCG表示をThree.jsで作成することができます。
具体的な使用事例は、「Three.js公式サイト」のトップページから、Three.jsが使用されている各々のWebサイトへ飛ぶことで閲覧ができます。
ここからは、Three.jsを用いて3DモデルをWebブラウザに表示するまでの手順を紹介していきます。ここでの説明では、Windows PCと統合開発環境のVisuaStudio Code(以下、VS Code)を用いた環境を例に用います。
Three.jsを使用するための環境構築、つまりライブラリのインストールは次の2通りのいずれかの方法で行うのが一般的です。
「npmでインストール」は、「Node.js」環境へnpmを用いてインストールする方法です。本格的な開発を進めるのに適していますが、Node.jsに慣れていないと環境を構築するまでが少し大変です。
「CDNでインストール」は、CDN(Content Delivery Network)を用いて、実行のたびにその都度ライブラリをダウンロードして組み込む方法です。事前の準備が不要なので、気軽に開発をスタートできます。
上記の方法以外ではライブラリを手動で丸ごとコピーする方法もあります。
ここでは、手軽に始められるCDNを用いた方法で進めていきます。
JavaScriptで開発を始めるにあたって、まずはVS Codeで下準備を行います。
1.Three.jsはWebサーバー上で実行するのが望ましいので、VS Code用の簡易的なWebサーバーを拡張機能から組み込んでおきます。VS Code左端のアイコンメニューから拡張機能を選択し、検索ボックスに「Live Server」と入力してLive Serverを探し出し、インストールを実行します。
2.続いてプロジェクトの準備です。VS Code左端のアイコンメニューからエクスプローラを選択し、「フォルダーを開く」をクリック、JavaScriptのプロジェクトを作成する任意のフォルダーを作成して開きます。今回は 「threejs_test」というフォルダー名で作成しました。
初回はセキュリティ上の確認ダイアログが表示されることもありますが、その場合は「はい、作成者を信頼します」をクリックして進みましょう。
3.先ほど作成したフォルダーの中に、下記2つのテキストファイルを新規作成しておきます。
4.以上でコーディングを開始する準備が整いました。
Webブラウザに読み込む index.html には、以下の内容を記述します。
【index.html】
上記のタグで、CDNからライブラリをダウンロードします。ライブラリはThree.js本体部分とアドオン部分の2つに分けてダウンロードしており、3Dモデルローダーやカメラ制御などの有用な機能の多くは、アドオン部分にも含まれています。
なお、CDNのURLに含まれる「0.162.0」はバージョン番号になります。新しいライブラリを使いたい場合は、ここの数字を変更してください。
上記のタグの位置に3DCGを描写するキャンバスが挿入されます。
JavaScriptでコーディングする main.js には、下記のコードを記述します。ライブラリ側で用意されているプリミティブ形状のオブジェクトを回転させながら描写するスクリプトになります。
【main.js】
上から順に「シーンやカメラ、レンダラーを準備して、シーンにライトやオブジェクトを配置、あとはオブジェクトの位置や向きを変化させながらレンダリングを繰り返す」と、わかりやすい記述でコーディングできることが確認できます。
上記では背景透過有り、アンチエイリアス有りでレンダラーを作成しています。
const geometry = new THREE.TorusKnotGeometry();
const material = new THREE.MeshLambertMaterial( { color: 0x55ffff } );
また、色指定の「color: 0x55ffff」は16進数のカラーコードで、先頭から2桁ずつ順番に赤色、緑色、青色の明るさを示す数値になります。いろいろと変更して試してみてください。
次の手順でJavaScriptの実行結果を確認できます。
1.index.html、main.js をそれぞれを保存したのち、VS Codeで index.html のエディター画面を表示して、エディター画面の余白部分で右クリックメニューから「Open with Live Server」を選択します。
2.Webブラウザが起動して index.html が表示されます。問題なくできていれば、回転する3DオブジェクトがWebブラウザ上に表示されているはずです。
今回の例のように、CDNでライブラリをインストールしている場合は 、index.html と main.js をWebサーバーにアップロードするだけで簡単にWeb公開できます。
その他、かなり強引な方法ではあるものの、WordPressで作成しているWebサイトの記事中に埋め込んで公開することもできます。今回は手順を紹介していきます。
1.main.js の修正を行います。下記のようにすることで、描画サイズがウィンドウ一杯ではなく、固定サイズになります。
【描画サイズ固定に変更】
2.WordPressを動かしているWebサーバーのルートディレクトリ(一般的には Public_html ) へ、修正した main.js をFTPなどでアップロードします。
3.WordPressの記事編集画面で、本文末尾に「カスタムHTMLブロック」を追加します。
4.追加されたカスタムHTMLブロックに、次のコードを記述します。
【本文末尾のカスタムHTMLブロックに記述】
もともと index.html 内にあったライブラリの読み込み部分とほぼ同じです。
main.js の先頭に「/(スラッシュ)」が追加されている点に注意してください。ルートディレクトリを示しています。もしルートディレクトリに .js ファイルを置きたくない場合は、ルートディレクトリの下に「/javascript」といったフォルダを作り、そこに main.js をアップロードし、下記のような呼び方にしても問題ありません。
5.続いて、WordPressの記事編集画面で、記事中の3DCG表示を埋め込みたい部分にカスタムHTMLブロックを追加し、次の一文を記述します。
【記事本文中のカスタムHTMLブロックに記述】
6.以上の編集を行って記事を公開すると、 記事中にThree.jsの3DCG表示が埋め込まれているのを確認できます。
「Three.js入門サイト」は、入門~応用まで多くの情報が整っており、何より日本語で学習できるおすすめのWebサイトです。
また、「Three.js公式サイト」の中にある「documentation」もチェックしておきたいものの1つです。チュートリアルもある程度日本語訳が進んでいるので、読み進めていくといろいろな発見があることでしょう。
同サイト内の「examples」は、Three.jsでどんなことができるのか知るのにピッタリの内容です。各サンプルページ右下のボタンから、ソースコードの閲覧も行えます。
Three.jsはパソコンやスマホなどのデバイスによらず、Webブラウザさえあれば比較的簡単に3Dコンテンツを表示することのできるJavaScriptライブラリです。Three.jsを活用することで視覚的に楽しい効果を生み出し、ユーザーを惹きつけるWebサイトも作りやすくなるでしょう。
参考になるサンプルが豊富にあるのも、十数年の積み重ねがあるThree.jsの強みです。気になる方は、より深くThree.jsの世界に触れていってみてください。
関連タグ:
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには