Three.jsでlil-guiを使ってみる

ブラウザ上で要素を操作できるGUIを作成するライブラリ「lil-gui」を使って、Three.jsの操作を試してみます。

設定方法

Three.jsの作業環境にlil-guiを追加します。

npm install lil-gui --save-dev

コードにlil-guiの読み込みと設定を追加します。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import GUI from 'lil-gui';

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// ヘルパーの表示
const axesHelper = new THREE.AxesHelper(1000);
scene.add(axesHelper);

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

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);

// カメラの位置変更と更新
camera.position.set(200, 100, 200);
controls.update();

// オブジェクトの作成
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
const object = new THREE.Mesh(geometry, material);
scene.add(object);

function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

// lil-guiの設定
const gui = new GUI();
gui.add( document, 'title' );

これでまずはGUIの表示ができました。
lil-guiの表示のデモページ

次に操作できる項目を追加してみます。
今回はボックスの位置とサイズ、ワイヤーフレームと色の設定を変更できるようにしてみます。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import GUI from 'lil-gui';

～略～

// lil-guiの設定
const gui = new GUI();
gui.add( object.position, 'x' ).min(-200).max(200).step(10); // 値が数値の場合の最小値と最大値、ステップの設定方法
gui.add( object.position, 'y', -100, 100, 10 ); // 上記は引数でも設定可能
gui.add( object.position, 'z' ).min(-200).max(200).step(50).name('position z'); // 表示されるラベル名を変更する場合はname()を使う
gui.add( object.scale, "x" ).min(0.1).max(3).step(0.1).name('scale x');
gui.add( object.scale, "y" ).min(0.1).max(3).step(0.1).name('scale y');
gui.add( object.scale, "z" ).min(0.1).max(3).step(0.1).name('scale z');
gui.add( material, 'wireframe' );
gui.addColor( material, 'color' );

これでそれぞれの設定を行えるようになりました。
lil-guiで設定を変更するデモページ

各項目をフォルダでグルーピングすることもできます。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import GUI from 'lil-gui';

～略～

// lil-guiの設定
const gui = new GUI();
const positionFolder = gui.addFolder( 'Position' );
positionFolder.add( object.position, 'x' ).min(-200).max(200).step(10);
positionFolder.add( object.position, 'y' ).min(-100).max(100).step(10);
positionFolder.add( object.position, 'z' ).min(-200).max(200).step(50);
const scaleFolder = gui.addFolder( 'Scale' );
scaleFolder.add( object.scale, "x" ).min(0.1).max(3).step(0.1);
scaleFolder.add( object.scale, "y" ).min(0.1).max(3).step(0.1);
scaleFolder.add( object.scale, "z" ).min(0.1).max(3).step(0.1);
gui.add( material, 'wireframe' );
gui.addColor( material, 'color' );

positionとscaleのフォルダ分けができました。
フォルダで分類するデモページ