Three.js チュートリアル: GUI デバッグ インターフェイス 2

推奨: NSDT シーン エディターを 3D ツールチェーンに追加します。

その他の一連のツール: NSDT Jianshi デジタル ツイン

GUIデバッグインターフェース 2色のネーミングなど

このレッスンでは、threejs を組み合わせて、gui.js ライブラリのメソッドをさらに紹介します。

.name()方法

.add()作成されたインタラクティブ インターフェイスには、変更されたプロパティの名前がデフォルトで表示されます。インタラクティブ インターフェイスを通じて変更したオブジェクトのプロパティをよりよく理解するために、 メソッドを使用して、GUI で生成されたインタラクティブ インターフェイスの表示内容を変更できます.name()。

const gui = new GUI();//创建GUI对象 
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度');
gui.add(directionalLight, 'intensity', 0, 2.0).name('平行光强度');

ステップサイズ.step()法

step.step()メソッドでは、対話型インターフェイスでプロパティ値を変更する間隔を設定できます。

gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度').step(0.1);

.onChange()方法

gui インターフェイスに特定の値が設定されると.onChange()メソッドが実行され、.onChange()必要に応じていくつかのコードを実行できます。

const obj = {
    x: 30,
};
// 当obj的x属性变化的时候，就把此时obj.x的值value赋值给mesh的x坐标
gui.add(obj, 'x', 0, 180).onChange(function(value){
    mesh.position.x = value;
	// 你可以写任何你想跟着obj.x同步变化的代码
	// 比如mesh.position.y = value;
});

.addColor()カラー値の変更

.addColor()カラー値を変更するためのインタラクティブなインターフェイスを生成する

const obj = {
    color:0x00ffff,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function(value){
    mesh.material.color.set(value);
});

3Dモデリングラーニングスタジオ

前: Three.js チュートリアル: gui.js ライブラリ (3D シーンを視覚的に変更) (mvrlink.com)

次へ: Three.js チュートリアル: GUI デバッグ 3 ドロップダウン メニュー、ラジオ ボタン (mvrlink.com)