如何通过按钮来实时控制3D中的小车前后移动
2024-06-15 21:08
白鲸 前台管理员
2024-06-19 13:49

该功能需要通过二次开发来实现,以下为二次开发示例代码:

// 二次开发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.速度)])
}
}

}


首先,我们选择小车模型,在右侧“代码”中添加二次开发代码。


然后我们添加三个按钮,分别命名为“后退”“停止”“前进”


为三个按钮分别设置触发二次开发中事件的交互,名称分别输入对应的“后退”“停止”“前进”,其余设置完全相同。


这样我们就实现了通过按钮来实时控制小车的前后移动。

扫描关注公众号

更多数字孪生可视化干货内容等你发现

了解更多内容

扫一扫
加入官方微信群
咨询热线0571-88650917
地址 公司 邮箱

杭州市文一西路海创科技中心 311121

杭州多算科技有限公司

support@shanhaibi.com

关注山海鯨官方qq群,了解更多内容

QQ群号:788095444

Copyright © 2024 多算科技, All Rights Reserved. 浙ICP备20006837号-5