Archive For The “three.js” Category

【3D】three.jsで400個のボックスを伸縮させるチュートリアル

By |

【3D】three.jsで400個のボックスを伸縮させるチュートリアル

iOS8にWebGLが搭載されたこともあり、three.jsにあらためて注目しています。 順を追ってコードのメモを書いていきます。まずはデモを御覧ください。 デモのURLはこちら URL : http://mankindinc.jp/programming/webgl/2.html ボックス生成 for(i=0;i<20;i++){ for(j=0;j<20;j++){ var geometry = new THREE.BoxGeometry(10,10,10); var material = new THREE.MeshNormalMaterial(); var cube = new THREE.Mesh(geometry , material); cube.castShadow = true; cube.position.set(i*10,0,j*10); scene.add(cube); } } iが縦軸、jが横軸になるように、2回ループを使って配置していきます。 座標を10ずつずらしているのは、ボックスのサイズが10だからです。 図示するとこんな感じです。         メインループの呼び方 (function mainLoop() { requestAnimationFrame(mainLoop); /* ここが毎フレーム呼ばれる */ renderer.render(scene, camera); })(); そうです「即時関数」です。即時関数で再帰的にメインループを呼びますので、ぐるぐるループして呼ばれます。 その際「requestAnimationFrame()」でフレームごとに呼ぶのがポイントですね。 処理が重たいなら、ここでフレーム調整するといいと思います。 メインループ内(1) → 全てのボックスに対して、forループで処理…

iOS8がWebGLに対応したので早速3Dモデルを動かしてみた【three.js x iOS8】

By |

iOS8がWebGLに対応したので早速3Dモデルを動かしてみた【three.js x iOS8】

iOS8から、ついに解禁となったWebGL(3Dの描画エンジンへJavaScriptからアクセスできる機能)。 そこで、早速以前作ったプログラム(three.js+WebGL)を動かしてみました。 機種はiPhone5(無印)です。iOS8の方はお試しあれ!(PCでも見れます) 結果・・・ 動いた!!! 元プログラムのURL : http://mankindinc.jp/programming/webgl/1.html   three.jsでロゴも動かしてみました。 three.jsのサンプルロゴも「Mankind,inc.」にして動かしてみました。 うむ。three.jsも動きますね。 更に、Unity5ではWebGLへの対応も決定しています。 夢が広がります。

Go Top