セットアップは前回の記事を参照。 前回BlenderでつくったモデルをThree.jsでレンダリングしてみます。 内容 ・Cubeにテクスチャを貼付けて動かす。 ・BlenderでつくったモデルをThree.jsで動かす。 ・Three.jsで10000個のparticleを動かす。 ・WebGLRendererでクリックイベントを検出する。 ・CSS3DRendererを使う。 Cubeにテクスチャを貼付けて動かす 今回は以下を使います。 ./mrdoob-three.js-f396baf/examples/js/controls/TrackballControls.js ./mrdoob-three.js-f396baf/build/three.js まずは全体から。 var renderer = new THREE.WebGLRenderer({ antialias:true });

Three.js は WebGL (OpenGL ES をブラウザから使う技術) を簡単に使うための有名なラッパーライブラリです。 OpenGL ES (OpenGL for Embedded Systems) 2.0をサポートするプラットフォーム上で、ブラウザのプラグインなしでH/Wアクセラレートされた3D描画を可能にします。 OpenGL ES は3.0 が 2012年に発表されましたが2.0 との後方互換性ありなので、WEB GLはiPhone/Androidで今後も動作すると思います。 IEも11からWebGL対応になるみたいですね。 今回は ・Three.jsのDLとサンプルの確認 ・Three.jsの基礎理解 ・Blenderで3Dモデルの作成 ・BlenderモデルのJSONエクスポートアドオン という内容です。 Three.jsのDLとサンプルの確認 公式からDLします。Z