控件

开发者可在 ThingJS 中使用系统内置的控件集成一些功能应用的开发,也可自定义开发控件来对一些功能模块进行封装。

内置控件

目前 ThingJS 内置了「小地图」、「第一人称行走」、「自由飞行」控件,可供开发者使用。

help
注意事项

目前上述内置控件暂时不兼容有地球的应用。

可通过 app.addControl() 添加相应的控件。

通过 app.removeControl() 删除对应的控件。

小地图控件

创建代码如下:

app.addControl(
    new THING.MiniMapControl({
    width: 200,
    height: 200,
    position: THING.CornerType.RightBottom,
    opacity: 0.8,
    scale: 1,
    angle: 0,
    mousewheel: true
    })
); 

参数意义如下:

  • width: 小地图宽度,单位 px;
  • height: 小地图高度,单位 px;
  • position: 相对屏幕坐标的定位位置;
    • 左上:THING.CornerType.LeftTop
    • 右上:THING.CornerType.RightTop
    • 右下:THING.CornerType.RightBottom
    • 左下:THING.CornerType.LeftBottom
  • opacity:不透明度设置;
  • scale: 小地图缩放比例;
  • angle: 小地图旋转角度;
  • mousewheel: 小地图是否支持鼠标缩放,默认为 false;

第一人称行走

该控件可进行“第一人称行走”的交互模式控制。

添加控件后,默认的交互为键盘按键:

  • A:左移
  • D:右移
  • W:前进
  • S:后退
  • 空格:跳跃(当开启重力时生效)

鼠标:

  • 按下左键旋转场景

创建代码如下:

app.addControl(new THING.WalkControl({
    walkSpeed: 0.02, //行走速度
    turnSpeed: 0.25, //鼠标操作时旋转场景的速度
    gravity: 29.8, //重量
    eyeHeight: 1.6, //视点高度
    jumpSpeed: 10, //跳跃速度
    enableKeyRotate: false, //是否开启键盘控制旋转 默认关闭
    useCollision: false, //是否进行水平方向碰撞检测 默认关闭
    useGravity: true //是否开启重力 默认开启
})); 

参数意义如下:

  • walkSpeed:行走速度;
  • turnSpeed:鼠标操作时旋转场景的速度;
  • gravity:重量;
  • eyeHeight:视点高度;
  • jumpSpeed:跳跃速度;
  • enableKeyRotate:是否开启键盘控制旋转,默认关闭,开启后按下 A 键向左旋转,按下 D 键向右旋转;
  • useCollision:是否进行水平方向碰撞检测,默认关闭;
  • useGravity:是否开启重力,默认开启,按空格键可进行跳跃,关闭后,空格键跳跃失效;

自由飞行

添加该控件后:

键盘:W A S D 控制飞行 Q E 控制升降;

鼠标:按住左键拖拽方向。

创建代码如下:

app.addControl(new THING.FlyControl()); 

自定义控件

开发者可以自定义类,通过实现 onAdd , onRemove , onUpdate 方法进行控件的扩展,开发自己的组件,便于功能模块的复用。

例如,定义一个CustomControl类(推荐使用ES6定义类的语法):

// 自定义控件
class CustomControl {
    constructor() {

    }
    onAdd(app) {

    }
    onRemove() {

    }
    onUpdate() {

    }
}

// 添加控件
var ctrl = app.addControl(new CustomControl());

// 删除控件
app.removeControl(ctrl); 

当添加控件时,会调用自定义控件的 onAdd 方法,并传入app对象。

添加控件后,每一帧会执行自定义控件的 onUpdate 方法。

删除控件时,会调用自定义控件的 onRemove 方法。

在线咨询
QQ交流群
微信公众号