dat.gui を使ってみた

学生生活の中でThree.js を使う機会が多いのですが, 機能操作のボタン等を CSS や Bootstrap を使って書いていたのですが,  個人的に dat.gui を使ったほうがクールなデザインで使いやすいと思ったので今回触ってみました.

 

dat.gui とは?

dat.gui とはJavascriptを使ってブラウザの上でパラメータ等を操作できるものです.

Three.js の example でよく使われています.

それぞれ必要なライブラリは以下の公式ホームページから取ってきてください.

Three.js : https://threejs.org/

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

 

今回使って作ってみたページ

スクリーンショット

f:id:shsm385:20171230180733p:plain

 ・内容

  Three.jsを使って描いた立方体のカメラ視点と色を変えられるようにしてみました.

 また, ボタンを押すとイベントが発生するものを作ってみました.

 

 

・コーディング部分

立方体の描画部分のHTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dat.guiの練習</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="index.js"></script>
</body>
</html>

立方体の描画部分(JS)

window.addEventListener('DOMContentLoaded', init);

function init() {
  // シーン
  var scene = new THREE.Scene();

  // レンダラー
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // カメラ
  var camera = new THREE.PerspectiveCamera( 15, window.innerWidth / window.innerHeight);
  camera.position.set(0, 0, 100);
  scene.add(camera);

  // マウス
  var controls = new THREE.OrbitControls(camera);

  // ライト
  light = new THREE.DirectionalLight(0xcccccc,1);
  light.position = new THREE.Vector3(0, 10, 10);
  ambient = new THREE.AmbientLight(0x333333);
  scene.add(light);
  scene.add(ambient);

  // キューブ
  var geometry = new THREE.BoxGeometry(12,12,12);
  var c = '#c2dc94';
  var material = new THREE.MeshPhongMaterial({color: c});
  var cube = new THREE.Mesh( geometry, material);
  cube.position.set(0,0,0);
  scene.add(cube);

  // レンダリング
  function render(){
    requestAnimationFrame(render);
    controls.update();
    renderer.render(scene,camera);
  }
  render();
}

 dat.gui 部分

// GUIパラメータ
  var guiCtrl = function(){
    this.Camera_x = 0;
    this.Camera_y = 0;
    this.Camera_z = 100;
    this.Message = '';
    this.color = "#c2dc94";
    this.alert = function(){
      alert("サンプル");
    };
  };

  gui = new dat.GUI();
  guiObj = new guiCtrl();
  var folder = gui.addFolder('Folder');
  folder.add( guiObj, 'Camera_x', 0, 100 ).onChange(setCameraPosition);
  folder.add( guiObj, 'Camera_y', 0, 100 ).onChange(setCameraPosition);
  folder.add( guiObj, 'Camera_z', 0, 100 ).onChange(setCameraPosition);
  folder.addColor( guiObj , 'color' ).onChange(setColor);
  folder.add( guiObj, 'alert' );
  folder.open();

  function setCameraPosition(){
    camera.position.set(guiObj.Camera_x, guiObj.Camera_y, guiObj.Camera_z);
  }

  function setColor(){
    material = new THREE.MeshPhongMaterial({color: guiObj.color});
    var cube = new THREE.Mesh( geometry, material);
    scene.add(cube);
  }

基本的な使い方としては初期値をパラメータとして設定する.

次に, dat.gui とパラメータのインスタンスを作成して add() で結びつけます.

通常は dat.gui のインスタンスに add() していけばよいのですが, 今回はフォルダ分けをしていますので folder に追加します.

もちろん関数を用いた更新処理やパラメータとして関数を設定できたりします.

使い勝手がよかったので興味が湧いたら使ってみてください.

今回のページのソースは以下からダウンロードできます.

GitHub - shsm385/dat.gui_pra: dat.gui の練習リポジトリ

参考ページ

dat.gui チュートリアル : dat.GUI

dat.gui APIドキュメント : dat.gui/API.md at master · dataarts/dat.gui · GitHub