three.jsのすすめ – 導入

最新の主要ブラウザは、Web上で3DCGを表示するための規格であるWebGLに対応しているため、Webサイト上に非常にリッチな3Dコンテンツを載せることができます。(対応ブラウザはこちらを参照ください。)

ただ、WebGLは直接扱いにくいため、Javascriptからより直観的にWebGLを操作するためのラッパーライブラリとしてthree.jsが登場し、現在ではディファクトスタンダードになっています。

MonoMediaでは、これから数回にわたってthree.jsの使い方について連載したいと思います。本日は、まずthree.jsの導入方法についてお伝えします。

(記事に登場するコードは、Windows10上で最新版のGoogle Chromeブラウザ(バージョン56以降)で検証しています。)

three.jsのダウンロード

three.jsは公式サイトからダウンロードできます。

サイトの左メニューの「Download」ボタンをクリックすると、100Mを超える巨大ZIPファイルのダウンロードが始まると思います。ZIPファイルを展開すると、buildフォルダ以下にthree.min.jsというファイルがあると思いますので、そちらをコピーして使います。

(公式サイトのトップページには、three.jsによって作成された、数多くのコンテンツへのリンクが並んでいます。three.jsの表現力に驚かされると思います。)

three.jsの読込

適当なフォルダ(以下の例ではthreejs_test)に、jsフォルダを作成し、先ほど取得したthree.min.jsファイルをコピーします。また、threejs_test直下にindex.htmlファイルを作成します。

index.htmlファイルをエディタで開き、以下のように記述します。

以上で準備は完了です。次回以降、3DCGを表示するためのコードを追加していきたいと思います。

 


“three.jsのすすめ – 導入” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です