dat-guiを試してみる

たまにthree.jsのデモと連動して使われているGUIライブラリdat-guiを試してみる。

ライブラリを導入

> bower install dat.gui
> tsd query dat-gui -rosa install

dat.GuiControllerのnameプロパティがtypings/dat-gui/dat-gui.d.tsで未定義だった。

bower_components/dat.gui/dat.gui.jsでは定義されていた。
    /**
    * The name of <code>GUI</code>. Used for folders. i.e
    * a folder's name
    * @type String
    */
    name: {
    get: function() {
        return params.name;
    },
    set: function(v) {
        // TODO Check for collisions among sibling folders
        params.name = v;
        if (title_row_name) {
        title_row_name.innerHTML = params.name;
        }
    }
    },

既存のd.tsにプロパティを追加する(C# partial class的な)方法があるかどうかわからないので、 dat-gui.d.tsを改造することにした。

dat-gui.d.tsにnameプロパティを追加
declare module dat {

    // 省略

    export class Controller { // <- dat.gui.jsに合わせて名前変えてみた
        destroy(): void;
        fire(): Controller;
        getValue(): any;
        isModified(): boolean;
        listen(): Controller;
        min(n: number): Controller;
        remove(target: Controller): void;
        setValue(value: any): Controller;
        step(n: number): Controller;
        updateDisplay(): void;
        name(newName?: string): string; // <- これ追加した
        onChange: (value?: any) => void;
        onFinishChange: (value?: any) => void;
    }
}

サンプルコードを元にtypescript化してみる

https://stemkoski.github.io/Three.js/GUI-Controller.html

をベースにした。 javscriptのコードをまるっとtsファイルにコピーして淡々と型を指定していく。

dat.guiの場所調整の件

autoPlace: falseがポインツ。そのうえでdomにposition:abusolute
var  gui = new dat.GUI( { autoPlace: false } );
comments powered by Disqus