0件のコメントセットアップは前回の記事を参照。前回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まずは全体から。再帰実行}簡単に説明すると、まずrendererの初期化をしています。});CanvasRendererも使えますが当然ですがOpenGL程の処理速度はでません。height)でサイズを指定します。THREE.Scene();sceneを作成しこれに対してcamera,ambient(ライト),mesh(物体)を追加していきます。500);cameraを作成し、camera.positionでカメラの位置を指定しています。物体に貼付けるtexture画像を先に読み出します。function(){});画像を読み出してから、ModelRenderをインスタンス化してmesh(物体)を作成します。CubeGeometry(直方体)以外にも,SphereGeometry(球体)やCircleGeometry(円)などがあります。テキストの場合はTextGeometryです。./examples/fonts/helvetiker_regular.typeface.js)を追加している必要があります。this.render.scene.add(mesh);};そして最後にレンダリングします。HTML5のrequestAnimationFrameでアニメーション化しています。モデルデータが読み込めないときがありました。サーバにアップしたら動きました。);JSONLoaderクラスでJSONで記述された3Dモデルを読み込んでます。meshに貼付けるはずのtextureが表示されませんでした。EditorControlsでマウスによるカメラのコントロールを可能にします。flyControlsで浮遊感のある視覚効果を出す事もできます。Three.jsで10000個のparticleを動かす。続いてcanvasで描画した星型の図形をWebGLで10000個描画します。canvasで星型の図形を書きます。context.stroke();次にverticesプロパティに全パーティクルの座標をpushします。);}ParticleSystemは点集合のオブジェクトでWebGL環境で使えます。THREE.ParticleSystemにgeometryとmaterial(ParticleBasicMaterial)をセットします。することで、個々の頂点がパーティクルとして扱われます。);particleの位置を更新します。0;}}あとはrequestAnimationFrameでLoopさせるだけです。この記事の上にあるような絵がでます。10000個を描画するにはGPUの力を借りないとほぼ無理なのでこれがWebGLの強みですね。レンダリングを速くする最適化する手法としてこちらで紹介されています。複数のオブジェクトをまとめたオブジェクトを描画したい場合は効果的ですね。WebGLRendererでクリックイベントを検出する。THREE.Projector()を使います。準備として、rayReceiveObjects配列を作っておいてpushします。);clickした位置に対して、rayを照射することでその範囲に含まれるオブジェクトをintersectsに入れています。よって、intersects.lengthで判定できます。{console.log(intersects[0].object.name);}CSS3DRendererを使う。examplesにあるcss3d_periodictable.htmlをみてみます。初期位置の設定をしています。1,・・・];の配列になっています。);の速度で以下の座標に移動しています。);CSS3DはDOMとの親和性が高いのが良いですね。Elmastudio。