如何通过按钮来实时控制3D中的小车前后移动
2024-06-15 21:08
为什么被折叠? 0 个回复被折叠

回答(1)

白鲸 前台管理员
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.速度)])
}
}

}


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


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


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


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

相关问题

数据表格如何实现动态勾选数据
我有很多层楼的数据,每层楼还有对应的房间号,我想通过下拉菜单选择某一层楼,然后条形图那边显示对应这层楼的各个房间的入住人数,用的你们的套件,但是联动不了,这该怎么设置
山海鲸可视化支持直接通过山海鲸数据管家数据源连接在山海鲸数据管家中创建的API 应用么?
table表格点击当前行,如何取值某个字段设置到项目参数
路径动画绑定实时数据,如果需要下一个点更新,小车是有动画移动过去下个点,而不是下个点出现的时候,它直接闪现,要怎么操作呢?
如何修改域名地址?
二维场景如何嵌入三维场景中?
三维场景中的天气能否通过数据来控制
如何通过按钮组件去控制切换中国地图组件的不同状态?
比如说有一段河道,我想要做一个洪水效果,洪水的大小根据实时数据来设定,镜头根据水头实时转换,并且水头要实时显示当前流速,鼠标点击河道某处要能获取当前的水深,这个效果该怎么实现?有水位流速数据
扫描关注公众号

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

了解更多内容

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

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

杭州多算科技有限公司

support@shanhaibi.com

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

QQ群号:788095444

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