2.3.3.1 使用自定义类

优质

小牛编辑

130浏览

2023-12-01

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

创建自定义类

用户可以定义自己的类，通过继承 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/storehouse' // 场景地址
});

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/storehouse' // 场景地址
});

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;
})