如何通过按钮来实时控制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.速度)])
}
}

}


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


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


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


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

相关问题

右侧按钮是如何做的?
我想实时显示点云数据,这个可不可以通过二开实现。山海鲸可视化平台导入,这一流程是否可以通过二次开发实现自动化处理
山海鲸可视化软件如何搭建三维场景,怎么进入三维编辑页面?
这个标绘 点击一下标记点就会变换位置,如何取消呢
我如何把项目发布后,展示的时候,只显示主页面,隐藏掉子页面,子页面只能通过我主页面的按钮进行跳转
我想点击一个设备A模型,就可以弹出设备A对应的设备信息(弹窗组件),数据一直在实时更新,我有很多设备,该怎么做?
如果搭建了一个二维的页面,在二维的页面上添加一个按钮(作用是跳转到下一页)我把这个二维的项目放到触屏电视机上,可以在电视机上点击触发跳转事件吗?
导入的模型在软件中出现闪烁现象,可能是什么原因及如何解决?
在非全屏播放时,手动刷新数据无效,如何解决?
在看板里面设置5个子面板,每个面板传递工厂代号特定的唯一值。所有的API接口的请求参数区别就在这个代号。返回的格式是一样的。这样我就不需要去设置5次数据源。给接口。是否可以通过代码来实现?
扫描关注公众号

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

了解更多内容

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

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

杭州多算科技有限公司

support@shanhaibi.com

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

QQ群号:788095444

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