Three.jsでたくさんのオブジェクトを動かす

引き続きちょこちょことThree.jsをいじってみたので、忘れないうちに記録。やってることは結構単純。たくさんの立方体をちょっとづつ角度をづらして回しているだけ。色も複数のスポットライトをつくって照らしている。

======================================
→ Three.js　たくさんのオブジェクトを動かす
======================================

繰り返し部分は以下のような処理をしています。

var NUM = 200;　// 生成するcubeの数
var cube = [];

// 中略

// cubeの生成
for(var i = 0; i < NUM; i++) {
cube[i] = new THREE.Mesh( geometry, material);
cube[i].castShadow = true;
cube[i].rotation.x = i / 10*Math.PI;
cube[i].rotation.y = i / 10*Math.PI;
scene.add(cube[i]);
}

// 中略

// 繰り返しのアニメーション設定
function animate () {
// 繰り返す
for(var i = 0; i < NUM; i++) {
cube[i].rotation.y += i / 25000 * Math.PI;
cube[i].rotation.x += i / 25000 * Math.PI;
cube[i].scale.x = 0.3 * Math.sin( Date.now() / 2000) + 1;
cube[i].scale.y = 0.3 * Math.sin( Date.now() / 2000) + 1;
cube[i].rotation.y += 0.005;
}

requestAnimationFrame(animate);
render();
}

生成したcubeをそれぞれX軸、Y軸にちょっとづつ角度をづらしながら回転させ、拡大縮小しています。試した結果、環境にもよるだろうけど、オブジェクトの数が5000ぐらいまでなら割とスムーズに動いた。10000超えると流石にもたつく。ちなみに以下のものが[NUM = 3000]にしたもの。これはこれでグリッチっぽくてかっこいいかなと思う。

======================================
→ Three.js　たくさんのオブジェクトを動かす [NUM = 3000]
======================================

色については[new THREE.PointLight]を複数、今回は10個、オブジェクトのまわりに設置して色をつけています。結構な力技。

背景透過の方法でちょっと詰まったのでメモ。かなり分かりづらいけど背景を透過にして画像（夜の海の写真）を敷いています。背景画像はbodyタグに設定。

background: url(img/blue_sea.jpg) center center / cover no-repeat fixed;

背景を透過させるに際して、[renderer.setClearColor(0x000000, 0);]だけではダメで、new THREE.WebGLRenderer( {alpha: true} )も併せて設定しなければ透過しなかった。setClearColor(0x000000, 0)の色の指定も[0x000000]でなければダメで、例えば[0xffffff]とかだと透過しなかった。

======================================
→ Three.js　たくさんのオブジェクトを動かす
======================================

Tweet