「トップページ」の編集履歴(バックアップ)一覧はこちら
「トップページ」(2016/02/10 (水) 20:44:00) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#divclass(modif){更新日:&date(), r58}
#divclass(hd){#hr()}
three.jsについて分からんなりにまとめたりするページ。&spanid(rev){}
**three.jsとは
JavaScriptで3DCGが簡単に動かせるやつ。
GPUに3DCGさせるやつ(OpenGL)をブラウザ上でJavaScriptで動くようにしたやつ(WebGL)の使い勝手をよくしたライブラリ(three.js)。
(WebGLだけじゃなくCanvas、SVG、CSS3D用レンダラも扱ってたり。でもだいたい重い。)
**環境
-ビデオカードが新しめのOpenGLに対応してないとそもそも動かない。
-[[WebGLブラウザ対応状況>>http://caniuse.com/#feat=webgl]]
--IE(Microsoft)は自社のDirectXがOpenGLと競合関係にあるので当分対応しないだろう(と思ったが[[IE11で対応するかもしれないとの噂>>http://yomotsu.net/blog/2013/03/31/webgl-on-ie.html]]が)。&br()IEの人は[[Google Chrome Frame>>http://www.google.com/chromeframe?hl=ja]]を入れましょう。入れてください。
--&spanid(enb){}
**入手
-[[three.js本家>>http://mrdoob.github.com/three.js/]]
--downloadから。three.jsセットが入ったzipを解凍すると、''buildフォルダの中''にthree.js(人間が読む用)と''three.min.js''(使う用に記述を圧縮したもの)がある。
--([[GitHub>>https://github.com/mrdoob/three.js/]]でやりたい人はそっちへ。)
**入門サイト
どこもそれなりにわかりやすい。
-[[THREE.js で WebGL | ヨモツネット>>http://www.yomotsu.net/wp/?p=597]]
--リビジョン r45。ヨモツさん。
-[[多彩な表現力のWebGLを扱いやすくする「Three.js」- @IT>>http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics05/01.html]] の前半
--リビジョン r52。
-[[HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(1/3)~>>http://www.natural-science.or.jp/article/20120220155529.php]]
--リビジョン r48。
**サンプル
-[[Three.js - examples>>http://stemkoski.github.io/Three.js/]]
--リビジョン r56。シンプルなサンプルが多くわかりやすい。zipはGitHubへのリンクから。
-[[three.js本家>>http://mrdoob.github.com/three.js/]]
--トップページのfeatured projects以外のexamples。&br()(three.jsセットのexamplesフォルダに同じものが入ってる。しかしFirefox以外はローカルのテクスチャ画像ファイルやモデルデータの読み込みを禁じており、一部サンプルは正常に動かないため、 本家のWeb上サンプル見るのが手軽。)
-[[Examples created by Yomotsu using THREE.js>>http://yomotsu.github.com/threejs-examples/]]
--リビジョン r49。モデル読み込みサンプル充実。zipは右上GitHubへのリンクから。これもヨモツさん。
**中級
-[[WebGL and Three.js>>http://www.slideshare.net/yomotsu/webgl-and-threejs]]
--WebGL・Three.jsについて広く触れられたスライド。これもヨモツさん。
-[[多彩な表現力のWebGLを扱いやすくする「Three.js」- @IT>>http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics05/01.html]] の後半
--リビジョン r52。
**ドキュメント
-[[three.js本家 - documentation>>http://mrdoob.github.io/three.js/docs/]]
--ぼつぼつ未完成。three.jsセットのdocsフォルダに同じものが入ってる。
-[[THREE.js Doc>>http://threejsdoc.appspot.com/doc/index.html]]
--ソース読み支援リファレンス。
#include(-rev)
#include(-hd)
//space
#divclass(modif){更新日:&date(), r58}
#divclass(hd){#hr()}
three.jsについて分からんなりにまとめたりするページ。&spanid(rev){}
**three.jsとは
JavaScriptで3DCGが簡単に動かせるやつ。
GPUに3DCGさせるやつ(OpenGL)をブラウザ上でJavaScriptで動くようにしたやつ(WebGL)の使い勝手をよくしたライブラリ(three.js)。
(WebGLだけじゃなくCanvas、SVG、CSS3D用レンダラも扱ってたり。でもだいたい重い。)
**環境
-ビデオカードが新しめのOpenGLに対応してないとそもそも動かない。
-[[WebGLブラウザ対応状況>>http://caniuse.com/#feat=webgl]]
--IE(Microsoft)は自社のDirectXがOpenGLと競合関係にあるので当分対応しないだろう(と思ったが[[IE11で対応するかもしれないとの噂>>http://yomotsu.net/blog/2013/03/31/webgl-on-ie.html]]が)。&br()IEの人は[[Google Chrome Frame>>http://www.google.com/chromeframe?hl=ja]]を入れましょう。入れてください。
--&spanid(enb){}
**入手
-[[three.js本家>>http://mrdoob.github.com/three.js/]]
--downloadから。three.jsセットが入ったzipを解凍すると、''buildフォルダの中''にthree.js(人間が読む用)と''three.min.js''(使う用に記述を圧縮したもの)がある。
--([[GitHub>>https://github.com/mrdoob/three.js/]]でやりたい人はそっちへ。)
**入門サイト
どこもそれなりにわかりやすい。
-[[THREE.js で WebGL | ヨモツネット>>http://www.yomotsu.net/wp/?p=597]]
--リビジョン r45。ヨモツさん。
-[[多彩な表現力のWebGLを扱いやすくする「Three.js」- @IT>>http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics05/01.html]] の前半
--リビジョン r52。
-[[HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(1/3)~>>http://www.natural-science.or.jp/article/20120220155529.php]]
--リビジョン r48。
**サンプル
-[[Three.js - examples>>http://stemkoski.github.io/Three.js/]]
--リビジョン r56。シンプルなサンプルが多くわかりやすい。zipはGitHubへのリンクから。
-[[three.js本家>>http://mrdoob.github.com/three.js/]]
--トップページのfeatured projects以外のexamples。&br()(three.jsセットのexamplesフォルダに同じものが入ってる。しかしFirefox以外はローカルのテクスチャ画像ファイルやモデルデータの読み込みを禁じており、一部サンプルは正常に動かないため、 本家のWeb上サンプル見るのが手軽。)
-[[Examples created by Yomotsu using THREE.js>>http://yomotsu.github.com/threejs-examples/]]
--リビジョン r49。モデル読み込みサンプル充実。zipは右上GitHubへのリンクから。これもヨモツさん。
**中級
-[[WebGL and Three.js>>http://www.slideshare.net/yomotsu/webgl-and-threejs]]
--WebGL・Three.jsについて広く触れられたスライド。これもヨモツさん。
-[[多彩な表現力のWebGLを扱いやすくする「Three.js」- @IT>>http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics05/01.html]] の後半
--リビジョン r52。
**ドキュメント
-[[three.js本家 - documentation>>http://mrdoob.github.io/three.js/docs/]]
--ぼつぼつ未完成。three.jsセットのdocsフォルダに同じものが入ってる。
-[[THREE.js Doc>>http://threejsdoc.appspot.com/doc/index.html]]
--ソース読み支援リファレンス。
#include(-rev)
#include(-hd)
//space.