three.js wiki

更新日：2016-02-10, r58

---

three.jsについて分からんなりにまとめたりするページ。

three.jsとは

JavaScriptで3DCGが簡単に動かせるやつ。
GPUに3DCGさせるやつ(OpenGL)をブラウザ上でJavaScriptで動くようにしたやつ(WebGL)の使い勝手をよくしたライブラリ(three.js)。
(WebGLだけじゃなくCanvas、SVG、CSS3D用レンダラも扱ってたり。でもだいたい重い。)

環境

• ビデオカードが新しめのOpenGLに対応してないとそもそも動かない。
• WebGLブラウザ対応状況
  • IE(Microsoft)は自社のDirectXがOpenGLと競合関係にあるので当分対応しないだろう（と思ったがIE11で対応するかもしれないとの噂が）。
    IEの人はGoogle Chrome Frameを入れましょう。入れてください。

入手

• three.js本家
  • downloadから。three.jsセットが入ったzipを解凍すると、buildフォルダの中にthree.js(人間が読む用)とthree.min.js(使う用に記述を圧縮したもの)がある。
  • (GitHubでやりたい人はそっちへ。)

入門サイト

どこもそれなりにわかりやすい。

• THREE.js で WebGL | ヨモツネット
  • リビジョン r45。ヨモツさん。
• 多彩な表現力のWebGLを扱いやすくする「Three.js」- ＠IT の前半
  • リビジョン r52。
• HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
  • リビジョン r48。

サンプル

• Three.js - examples
  • リビジョン r56。シンプルなサンプルが多くわかりやすい。zipはGitHubへのリンクから。
• three.js本家
  • トップページのfeatured projects以外のexamples。
    （three.jsセットのexamplesフォルダに同じものが入ってる。しかしFirefox以外はローカルのテクスチャ画像ファイルやモデルデータの読み込みを禁じており、一部サンプルは正常に動かないため、 本家のWeb上サンプル見るのが手軽。）
• Examples created by Yomotsu using THREE.js
  • リビジョン r49。モデル読み込みサンプル充実。zipは右上GitHubへのリンクから。これもヨモツさん。

中級

• WebGL and Three.js
  • WebGL・Three.jsについて広く触れられたスライド。これもヨモツさん。
• 多彩な表現力のWebGLを扱いやすくする「Three.js」- ＠IT の後半
  • リビジョン r52。

ドキュメント

• three.js本家 - documentation
  • ぼつぼつ未完成。three.jsセットのdocsフォルダに同じものが入ってる。
• THREE.js Doc
  • ソース読み支援リファレンス。

javascript plugin Error : このプラグインで利用できない命令または文字列が入っています。