希望通过看板图层上的按钮来控制3D场景中的小车前后移动
该功能需要通过二次开发来实现,以下为二次开发示例代码:
// 二次开发API参考 https://www.shanhaibi.com/docs/v1/tx9rigt2ff6e0m1h/
export class SampleExtension {
小车 = Element.empty(); //定义组件选择器,可选择其他组件(单选)
速度 = 0.1;
/**
* 生命周期函数 当前初始化完成时回调
* 事件监听通常在这里添加
* 注意:由于这是其他组件可能还未加载,其他组件的引用在这里可能还是空
*/
#actionType = "停止";
async init() {
/**
* 事件监听示例
*/
// //监听组件数据变化
this.element.addEventListener("前进", (ev)=>{
// your code here
this.#actionType = "前进"
});
this.element.addEventListener("后退", (ev)=>{
// your code here
this.#actionType = "后退"
});
this.element.addEventListener("停止", (ev)=>{
// your code here
this.#actionType = "停止"
});
}
/**
* 生命周期函数 ready后每帧调用,未启用时不会调用
* 不要在这里放耗时的操作,否则会很卡
*/
update() {
if(this.#actionType === "停止") {
return;
} else if(this.#actionType === "后退") {
let [x, y, z] = this.小车.getOption("position");
this.小车.setOption("position", [x, y, Number(z) + Number(this.速度)])
} else if(this.#actionType === "前进") {
let [x, y, z] = this.小车.getOption("position");
this.小车.setOption("position", [x, y, Number(z) - Number(this.速度)])
}
}
}
首先,我们选择小车模型,在右侧“代码”中添加二次开发代码。
然后我们添加三个按钮,分别命名为“后退”、“停止”和“前进”。
为三个按钮分别设置触发二次开发中事件的交互,名称分别输入对应的“后退”、“停止”和“前进”,其余设置完全相同。
这样我们就实现了通过按钮来实时控制小车的前后移动。
更多数字孪生可视化干货内容等你发现
了解更多内容