Three.js BoxGeometryだけでKey Visualを作る

こんにちは、たくぞうです。
今回は、BOXと反射光を使ってありそうなKey Visualを作ってみました。
使ってる技術的にはThree.jsの基礎中の基礎ですので、簡単に作れるかと思います。

WebGL勉強始めた人の参考になれば幸いです。

作ったもの
コード説明
まとめ

作ったもの

今回作ったものはこちらです。

参考 DEMO BOX100DEMO BOX100

やっていることは、BOXをX・Z軸に10個づつ並べ、それぞれにランダムな回転数を与えてます。
どちらかというとJavaScriptの勉強になってます笑

コード説明

BOXを100個並べる

生成したメッシュ100個を配列に格納し、シーンに追加する処理

JavaScript

// boxList
let boxSize = 3.6;
let boxCount = 10;
let boxArea = boxCount * boxSize;
geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
for(x = 0; x < boxCount; x++){
  for(z = 0; z < boxCount; z++){ 
    let index = 10 * x + z;
    let posiX = (x * boxSize) - (boxArea / 2) + (boxSize / 2);
    let posiZ = (z * boxSize) - (boxArea / 2) + (boxSize / 2);
    boxList[index] = new THREE.Mesh(geometry, material);
    boxList[index].position.set(posiX*1.0, -7.0, posiZ*1.0);
    scene.add(boxList[index]);
  }
}

BOXをランダムに回転させる

render関数の中で、for文を回し同じboxList[]に乱数を与えることでBOXごとの回転を変えている。

JavaScript


// rendering
function render(){
if(run){requestAnimationFrame(render);}
  for(i = 0; i < 100; i++){
    var min = 0;
    var max = 20;
    var random = Math.floor( Math.random() * (max + 1 - min) ) + min ;
    boxList[i].rotation.z  += random * 0.003;
    boxList[i].rotation.y  -= random * 0.003;
  }
  if(isDown === true){
    box.rotation.y += 0.03;
  }
  console.log(camera.position);
  renderer.render(scene, camera);
}

反射光のみを表示させる

今回は反射光のみを表示したかったため、
レンダー・BOXの色を黒にし、マテリアルのspecularに反射させる色を指定している。

JavaScript


    // constant variables
    const RENDERER_PARAM = {
        clearColor: 000
    };
    const MATERIAL_PARAM = {
        color: 000,
        specular: 0x2DCEF4
    };}

MEMO

three.js では反射光を表現するにはマテリアル側を修正して対応する。
今回はMeshPhongMaterialを使用