使用自定义类

本章节中，简述自定义类的创建和使用方法，供参考。

创建自定义类

用户可以定义自己的类，通过继承 ThingJS 内部类（比如：Thing 类），对 ThingJS 进行扩展和封装。

我们推荐使用 ES6 语法定义一个类。例如，自定义汽车类 Car。

// 继承 Thing 类
class Car extends THING.Thing {
    constructor(app) {
        super(app);
    }
    // 添加一个 run 方法
    run() {

    }
}

要在 ThingJS 中使用自定义的类，还需要对其进行注册。

通过 THING.factory.registerClass 方法，将继承于 ThingJS 内部类的自定义类，注册到系统中。例如：

 // 注册自定义类 
THING.factory.registerClass('Car', Car);

使用自定义类

用户定义并注册完自己的类后，常见的使用方式有以下两种：创建自定义类的物体和转换已有物体的类型。

创建自定义类的物体

利用 app.create 方法进行创建时，指定 type 为自定义类。代码如下：

 var car = app.create({
    type: 'Car', // 自定义注册类的名称
    name: 'GMC指挥车',
    url: 'https://model.3dmomoda.com/models/17fc17b416e94527bc607917fc8269a4/0/gltf/',// 模型地址 
    position: [10, 0, 10],
    complete: function () {
        console.log('created: ' + this.name);
    }
});

此外，同样可对注册后的自定义类进行 query 查询，注册事件等操作。

// 查询得到所有Car类的物体
var cars=app.query('.Car')

// 给所有Car类的物体 添加Click事件
app.on('click','.Car',function(ev){
    var obj=ev.object;
    console.log(obj.name);
})

转换已有物体类型

通过 THING.Utils.convertObjectClass 方法将场景中物体，转为自定义的类型，例如：

// 查询得到 name 中包含 car 字符串的物体集合
var cars=app.query(/car/);
// 遍历物体集合，逐个转换成自定义的 Car 类
cars.forEach(function (obj) {
    THING.Utils.convertObjectClass(obj, 'Car')
})

应用示例

下面的示例中，对自定义类的创建和转换进行了介绍。

创建自定义类物体

下面的示例中，创建了自定义类 Car。双击红色小车后，小车将开始移动。

class Car extends THING.Thing {
    constructor(app) {
        super(app);
    }
    run() {
        this.moveTo({
            position: [0, 0, 0],
            orientToPath: true,
            lerpType: null,
            time: 3 * 1000,
            complete: function () {
                console.log("moveto completed");
            }
        });
    }
}
// 注册自定义类
// 第一个参数是为自定义类取的名称
// 第二个参数是 类 本身
THING.factory.registerClass('MyCar', Car);

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    background: '#000000',
    env: 'Seaside',
});

app.on('load', function () {
    // 使用自定义类，创建物体
    var car = app.create({
        type: 'MyCar', // 自定义注册类的名称
        name: 'GMC指挥车',
        url: 'https://model.3dmomoda.com/models/17fc17b416e94527bc607917fc8269a4/0/gltf/', // 模型地址
        position: [10, 0, 10],
        complete: function () {
            console.log('created: ' + this.name+ ' '+this.type);
        }
    });
})

// 给自定义类物体注册双击事件
app.on('dblclick', '.MyCar', function (ev) {
    var obj = ev.object;
    // 调用定义的 run 方法
    obj.run();
})

转换已有物体类型

下面的示例中，将原本场景中 name 包含 car 的 Thing 类型物体（即场景中的车）转换成了 Car 类型。

class Car extends THING.Thing {

    constructor(app) {
        super(app);
    }
    run() {
        this.moveTo({
            position: [0, 0, 0],
            orientToPath: true,
            lerpType: null,
            time: 5 * 1000,
            complete: function () {
                console.log("moveto completed");
            }
        });
    }

}
// 注册自定义类
THING.factory.registerClass('Car', Car);

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
    background: '#000000',
    env: 'Seaside',
});

app.on('load', function () {
    // 查询 name 中带有 car 值的物体
    // 并转换为自定义的类
    app.query(/car/).forEach(function (obj) {
        // 将查到的物体对象 转换成自定义的 Car 类
        THING.Utils.convertObjectClass(obj, 'Car')
    })

    var cars = app.query('.Car');
    cars.on('dblClick', function (ev) {
        var car = ev.object;
        car.run();
    })
})
app.on('mouseenter', '.Car', function (ev) {
    var obj = ev.object;
    obj.style.color = 'rgb(255,0,0)';
})

app.on('mouseleave', '.Car', function (ev) {
    var obj = ev.object;
    obj.style.color = null;
})