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;
/*省略*/
}

 

おわりに

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

 

.

スポンサーリンク


Fatal error: Uncaught Error: Call to undefined function is_mobile() in /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/piece-ads.php:11 Stack trace: #0 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(724): require() #1 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(671): load_template('/home/ykplay/uo...', false) #2 /home/ykplay/uotomizu.com/public_html/a/wp-includes/general-template.php(168): locate_template(Array, true, false) #3 /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/single-article.php(33): get_template_part('piece', 'ads') #4 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(724): require('/home/ykplay/uo...') #5 /home/ykplay/uotomizu.com/public_html/a/wp-includes/template.php(671): load_template('/home/ykplay/uo...', false) #6 /home/ykplay/uotomizu.com/public_html/a/wp-includes/general-template.php(168): locate_template(Array, true, false) #7 /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/single.php(7): g in /home/ykplay/uotomizu.com/public_html/a/wp-content/themes/atelier/piece-ads.php on line 11