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を使用

まとめ

  • 背景を黒にする場合は、renderer.setClearColor()でカラーを指定する。
  • 反射光を使う場合は「MeshPhongMaterial」を使用する。

 

3D表現の勉強よりはJavasvriptの勉強になってしましました、、m(._.)m
3D描画では簡単にできることでも見せ方次第では、それっぽくなりますね笑
予想していた通りの表現ができるよう知識をつけてこうと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Translate »