THREE で遊んでみる

THREE のライブラリを入れてWebGLで遊んでみました。

↓以下のライブラリをインクルードして、

<script src="tree/build/three.js"></script>
<script src="tree/examples/js/libs/ammo.js"></script>
<script src="tree/examples/js/controls/OrbitControls.js"></script>
<script src="tree/examples/js/Detector.js"></script>
<script src="tree/examples/js/libs/stats.min.js"></script>
<script src="tree/examples/js/ConvexObjectBreaker.js"></script>
<script src="tree/examples/js/QuickHull.js"></script>
<script src="tree/examples/js/geometries/ConvexGeometry.js"></script>

↓こんな感じでJSを書いたら、板のようなオブジェクトをボーリングみたいな配置にすることが簡単にできました。

        var stoneMass = 120;
        var stoneHalfExtents = new THREE.Vector3( 1, 2, 0.15 );
        var numStones = 8;
        quat.set( 0, 0, 0, 1 );
        for ( var i = 0; i < numStones; i++ ) {

            for ( var i2 = i * -1; i2 <= i; i2 += 2 ) {

                pos.set( i2, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
                createObject( stoneMass, stoneHalfExtents, pos, quat, createMaterial( 0xB0B0B0 ) );

            }

        }