【Three.js】複数のブロックを散らしてみる

はじめに

Qiitaの記事にCodePenが埋め込めるようになりました！
これでhoverの動きやアニメーションが簡単に試せますね！

今回はThree.jsで複数の小さいブロックを散らすアニメーションを作成してみます
最終的にはこんな感じです↓

See the Pen moving blocks by qwerty8t (@qwerty8t) on CodePen.

コード

全体のコードはCodePenで確認してください．

補足

グローバルに定数を設定

グローバルに定数として宣言することで
ブロックの大きさや速さを容易に変更できるようにします．

const block_width = 5; // ブロックの横の長さ
const block_height = 5; // ブロックの縦の長さ
const block_num = 300; // ブロックの数
const min_speed = 1; // ブロックの最遅スピード
const max_speed = 10; // ブロックの最速スピード

ブロックの色を乱数にする

Three.jsでは色の指定を"0x"の後の16進数で表現するのが推奨されているようです．

let rect = [];
for (var i = 0; i < block_num; i++) {
  var color = "0x" + Math.floor(Math.random() * 16777215).toString(16);
  // var color = "0xffffff";
  var material = new THREE.MeshBasicMaterial({
    color: Number(color)
  });

  rect.push(new THREE.Mesh(geometry, material));
}

for (var i in rect) scene.add(rect[i]);

ブロックの初期位置と速度を乱数にする

let x = [];
let y = [];
let dx = [];
let dy = [];
const min_pos_x = -(Number(width) / 2);
const max_pos_x = (Number(width) / 2);
const min_pos_y = -(Number(height) / 2);
const max_pos_y = (Number(height) / 2);

for (var i = 0; i < block_num; i++) {
  x.push(Math.floor(Math.random() * (max_pos_x + 1 - min_pos_x)) + min_pos_x);
  y.push(Math.floor(Math.random() * (max_pos_y + 1 - min_pos_y)) + min_pos_y);
  dx.push(Math.floor(Math.random() * (max_speed + 1 - min_speed)) + min_speed);
  dy.push(Math.floor(Math.random() * (max_speed + 1 - min_speed)) + min_speed);
}

壁との跳ね返り

壁とブロックが当たれば速度の+, -を変更します．

（コメントアウトを外すと壁と接触する度に加速します）

for (var i in rect) {
  x[i] += dx[i];
  y[i] += dy[i];
  if (x[i] > (width / 2) || x[i] < (-width / 2)) {
    dx[i] = -dx[i];
    // if (dx[i] < 0) dx[i] = dx[i] - 1;
    // else dx[i] = dx[i] + 1;
    x[i] += dx[i];
  }
  if (y[i] > (height / 2) || y[i] < (-height / 2)) {
    dy[i] = -dy[i];
    // if (dy[i] < 0) dy[i] = dy[i] - 1;
    // else dy[i] = dy[i] + 1;
    y[i] += dy[i];
  }

  rect[i].position.x = x[i];
  rect[i].position.y = y[i];
}

おわりに

Three.jsの公式ドキュメントは英語ですが，英語が理解できなくてもコードはなんとなく理解できると思います．

CodePenが埋め込めるのは本当にすばらしいです！
運営の方々ありがとうございます！

以上