ThingJS专栏

ThingJsAPI文档使用总结

2019-02-18  本文已影响0人  爱吃香菜的憨憨

此文章为本人方便查找使用ThingJsAPI的个人总结，原创API请查看ThingJs官网http://www.thingjs.com

目录

APP对象

一、环境和效果控制

   var particle = app.create({
       type: 'ParticleSystem',
       url: 'http://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles',
       position: [0,30, 0]
   });

4、喷水

penshui.png 
    var particle = app.query('#water01')[0];
    if (!particle) {
        // 创建喷水效果
        particle = app.create({
            id: 'water01',
            type: 'ParticleSystem',
            url: 'https://thingjs.com/static/particles/water1',
            position: [0, 0, 5]
        });

        // 每一帧旋转 1 度
        particle.on('update', function (ev) {
            ev.object.rotateY(1.0);
        }, '喷水旋转')
    }
    //销毁喷水效果
    if (particle) {
        // 先卸载掉事件
        particle.off('update', null, '喷水旋转');
        // 再删除粒子
        particle.destroy();
    }

二、获取对象——query查询

queryConsole.png

三、对象创建

四、界面

五、控制对象

六、拾取和选择

1.通过属性和接口获取鼠标拾取（Pick）的物体

if (app.picker.isChanged()) {
    //通过app.picker.objects 得到当前拾取的物体
    console.log(app.picker.objects);
    //通过app.picker.previousObjects 得到之前拾取的物体
    console.log(app.picker.previousObjects);
}

2.通过事件获取鼠标拾取（Pick）的物体

// 鼠标拾取的物体勾边
app.on(THING.EventType.Pick, '.Thing' ,function(ev) {
    ev.object.style.outlineColor = '#FF0000';
});
// 鼠标离开物体取消勾边
app.on(THING.EventType.Unpick,'.Thing', function(ev) {
    ev.object.style.outlineColor = null;
});

//也可以通过 mouseover 和 mouseleave 来实现
// 改变颜色
app.on(THING.EventType.MouseOver,'.Thing', function () {
    app.picker.objects.style.color = '#ff0000';
});

// 还原颜色
app.on(THING.EventType.MouseLeave, '.Thing',function () {
    app.picker.previousObjects.style.color = null;
});

//当 Pick 发生变化时会触发 PickChange 事件,也可以通过事件的回调参数获取当前和之前的拾取物体
app.on(THING.EventType.PickChange,function (ev) {
    ev.objects.style.color = '#ff0000';
    ev.previousObjects.style.color = null;
});

3.区域 Pick 物体

//由于框选比较消耗性能，因此预先设置框的“候选集”，只在候选集中框选
var things = app.query('.Thing');
app.picker.areaCandidates = things;

//启动框选 传入 鼠标按下时开始框选的屏幕坐标
app.picker.startAreaPicking({
    x: x,
    y: y
});
//结束框选
app.picker.endAreaPicking();

//通过 pickedResultFunc 设置拾取对象回调函数
app.on(THING.EventType.EnterLevel, '.Building', function () {
    app.picker.pickedResultFunc = function () {
        //do something
    }
})

4.选择物体

//将物体加入到选择集中
app.selection.select(obj);
//将物体从选择集中删除
app.selection.deselect(obj);
//清空选择集
app.selection.clear();

七、事件

八、摄像机

九、园区与层级

文章后续会继续更新

上一篇下一篇

猜你喜欢

热点阅读