dat.GUIを使ってThree.jsで作成した立方体を操作する方法

ウオトミズ(UOTOMIZU)の中の人

dat.GUIを使って、Three.jsで作成した物体の色や大きさをコントロールしたいときに、自分が苦戦した箇所まとめる。

完成形

Three.jsで立方体を作成して、適当にそれっぽくなるように光源やアニメーションを加えてる。

dat.GUIでは、レンダラーの背景色、立方体の色、立方体の大きさの3つをコントロールできるようにしている。

多分スマホでは動かないっぽい。

 

dat.GUIの記述方法

チュートリアルを読めば、GUIコントローラーの作成は簡単にできるので、そちらを参照。

dat.GUI チュートリアル:https://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage

dat.GUI GitHub:https://github.com/dataarts/dat.gui

 

GUIの画面は簡単に作成できるのだけど、操作したいものと紐づけるのが難しかったりした。

大まかな手順としては、

  1. 操作する要素の作成
  2. GUI画面の作成
  3. 要素と項目の紐づけ

という流れ。

 

色を変える

three.jsのsetColorを使う。

custom.js


function update() {
/*省略*/
color = data.color;
cube.setColor = function(color) {
cube.material.color = new THREE.Color(color);
}
cube.setColor();
/*省略*/
}

 

大きさを変える

three.jsのscaleを使う。

custom.js


function update() {
/*省略*/
scale = data.scale;
object.scale.x = scale;
object.scale.y = scale;
object.scale.z = scale;
/*省略*/
}

 

おわりに

まだ勉強中なので、おかしなとこがあったらご指摘おねがいします。

 

.