カテゴリー別アーカイブ: Three.js

Three.js のデモ

Thress.jsの基本となる物体 (形状と表面材質で構成) とライトで構成されるscene, そして, カメラをレンダリングする基本処理と, 各オブジェクトのパラメータ (ポジションや回転など) を設定しながら, どのように3Dレンダリングされるのかを確認できるデモを作成してみました.

http://curtaincall.weblike.jp/prog/javascript/webgl/cube

Three.jsの基本を体感的に理解するために少しでもお役に立てればと思います.

 

Three.jsを使ってみた

WebGLを始めた頃, ライブラリに頼らずに…と思いましたが, やはり3Dの壁は大きく, JavaScriptのAPIに追加して, 行列などの数学の知識やシェーダー (ES : OpenGL Shading Language) の習得といったことが必要ということが取り組んでいくうちにわかってしまい….

さすがにこれはちょっときつい…ということで, まずはいったんライブラリは利用しないという方向性はとりあえずあきらめました.

そして,WebGLのデファクトスタンダードなライブラリであるThree.jsを利用することから改めて始めようと思いました.

Thress.jsの基本となる処理は, 物体 (Mesh) とライトで構成されるscene,オブジェクト そして, カメラとなるオブジェクトをレンダラーのrenderメソッドに指定するというすごくシンプルなことです.

さらに, 物体 (Mesh) とは

  • 形状
  • 表面材質 (色やテクスチャ)

を表す2つのオブジェクトで構成されます.

また, 物体 (Mesh) やライト, カメラは位置や回転などを指定することが可能です.