用意されたプリミティブなgeometryを使うかBlenderなどでモデリングしたgeometryを使う事もできます。Textureオブジェクトマテリアルに画像を指定することができます。ローカルのhtmlだとセキュリティ例外で画像を読めません。サーバーを立ててhtmlと画像ファイルを同じサーバーから読むようにしてください。2の乗数の縦横サイズの画像でないと読み込めない場合もあるみたいですがまだ確認はしてないです。Three.jsのシェーディング陰影(いんえい)=影付けのことです。CPUで描画するCanvas2DとGPUを使うWebGLで大きくパフォーマンスが変わります。光線ベクトルと法線ベクトルが垂直の場合明暗く、平行の場合明るくなる。内積が0に近いほど暗くなる。コードは次回書きますが、最後にレンダラーでレンダリングすることで、メッシュが光源の影響を受けて描画されるいう仕組みです。Blender(MacOS環境)今回はThree.jsで描画するモデルをBlenderで作成します。Blenderは3DCGアニメーションを作成するためのOSSです。現在のlatest-stableは2.69です。Blenderの基本設定(MacOS)Blenderはパネルを切り替えながら操作をしていきます。Preferences」で各種設定ができます。編集モード切替TABキーでObjectモードとEditモードの切り替えが出来ます。Objectモード:オブジェクトを移動させたり、拡大縮小させたりできます。位置関係の調整、オブジェクトの追加ができます。Editモード:メッシュオブジェクト自体を編集して、形を変えたりします。Objectの操作3DViewで右上にある+を選択すると切り替わります。Aを押します(画面上部の”Add”でも同様)。ループ切断モードに切り替わりますので、マウスカーソルを立方体の垂直の4本の辺のどれかに近づけます。カラーマップから色を選択できます。画像を貼付けることができます。初期では貼付ける形状が「Flat」になっています。他に「Cube」「Tube」「Sphere」があります。Sky」で設定できます。アニメーション設定タイムライン・エディタを起動します。アニメーションのタイムラインを制御するのに使います。初期では現在のフレームが1フレームです。「Start」が1、「End」が250はアニメーションの長さを意味します。変更することで1秒間のフレーム数を変更できます。画面右下の出力で設定します。AVIなどのファイルフォーマットに変更できます。レンダリングレンダリングが実行されます。ビルドみたいなものですね。参考:URL,URL2Threejsで使うためにBlenderをJSONで出力するBlenderで書き出したJSONデータをJSONLoaderクラスで読み込む場合はアドオンを使います。ThreejsのAddonのPythonは以下にあります。[Threejs]/utils/exporters/blender/2.66/scripts/addons以下の場所に移動させます。(MacOS)/Applications/Blender.app/Contents/MacOS/2.69/scripts/addons例えばこんな感じです。/Applications/Blender.app/Contents/MacOS/2.69/scripts/addons/io_mesh_threejs/これでBlenderからJSONエクスポートができるようになりました。「ユーザ設定の保存」を忘れずに。3Dプリンタ出力用のモデル作成もBlenderで可能なのでもっと使えるようになりたいです。こちらを参考にしました。次回はBlenderで作成したモデルをThree.jsで使ってみます。Elmastudio。