読者です 読者をやめる 読者になる 読者になる

arveltのソフトウェア技術メモ

Arvelt's software technology memo

three.jsをさわってみた話

3Dに興味あります。そこでjavascriptで3Dに関することを扱うライブラリでthree.jsというのを触ってみました。レンダリングwebglを使えることが特徴です。コード書いたのだいぶ前だけど忘れないうちにメモ。

 

○three.js

http://threejs.org/

 

○three.jsを使って作ったもの

ゲームっぽいもの。すぐに動きます。

https://dl.dropboxusercontent.com/u/19360039/threejs-sandbox/examples/game_avoidblock.html

 

ソースコード

https://github.com/arvelt/threejs-sandbox/blob/master/examples/game_avoidblock.html

 

3Dのあれやこれをあれほどの少ないコード量で書くことができます。3Dのことを全く知らない状態から初めていますが、とりあえず動くものを作ることができました。

 

○気づいたこと

・3Dがそもそもわからない

サイトならここ

http://wgld.org/d/webgl/w003.html 

 

本ならこれ

 

明解 3次元コンピュータグラフィックス

明解 3次元コンピュータグラフィックス

 

 

1,2,3章あたりに、コンピューターで3Dを扱うことの体系的な概念が書いてあるので、ほんとうの初学者におすすめ。

 

コンピューターで2Dとか3Dとかって意味わからんしと思ってたのが、ぼんやりとわかるようになる。

 

・んでthree.jsで何ができんの

http://threejs.org/examples/

公式サイトのexsample。

 

http://stemkoski.github.io/Three.js/

three.jsのサンプルを集めたサイト。こういうことやりたいときはどうやんのってときに探しに行くときに眺めると閃きを得たりする。

 

http://wgld.org/d/webgl/

webglはそもそもなんやねんというのがわからないときなど。体系的に書いてるので読みやすい。

 

・実際にとるべき手順

1.まず3Dの概念をおぼろげに理解する

2.それらがthree.js上でどう抽象化されているか把握する

3.自分がやりたいことは3D的にどう実現したらいいかを分割する

4.その分割した要素をやってるサンプルを探す。

5.ソースを読んで真似をする

6.コード書く、動かす、デバッグする。

7.4-6を繰り返す。

8.完成!

 

・まとめ的な

three.jsはシーン、ジオメトリ、ライト、カメラ、レンダリング、を書いていくと完成する。

three.jsはいまだ黎明期であり、バージョン上がれば動かなかったりするようなものがざらにあるので注意しないといけない。

3Dのモデルは形状と表面を分けて考える。

表示するものがないとなにも意味が無いので、3Dモデリングが最も重要。

3Dの本質は数学の世界なのでかつて因数分解でつまづいた私には手に負えない。もし続けていくならば、抽象化したものに対する操作の概念として把握しなければならない。