自建html界面用div或iframe方式嵌入3D，获取3D里的点击事件

Felix.Li

①我自建了一个html界面，里面用iframe嵌入了创建好的3D（也可以使用div嵌入）

②在3D里面有一些设备，设备上绑定了设备的编号
③我现在想实现在点击某个设备时，实现监听其点击时间，并获取一个设备编号。

我在教程贴里提问了此问题，以下为答复：

两种情况，
1. html 嵌入 Wyn 制作的 3D 模型看板，可以在模型脚本中注册点击事件的 observable
2. html 嵌入自己用 babylonjs 引入的 3D 模型，可以在自己的引入脚本中注册点击事件

上述两种情况都是需要代码中可以访问到 scene 对象才能进行事件注册

针对以上情况，麻烦给个具体示例参照，十分感谢

Felix.Li · Felix.Li

这个实现方式在模型里面写的:

image.png645427245.png

。我第二次说的，您把需要执行的代码写在自己的里面。然后在我们的里面调用，其实是为了代码实现更好。
如果您是ifream的话，就可以参考我第一个，把代码写在我们的模型里面。然后把获取模型名称的那块改成我第二次回复的。
通过遍历父节点拿到。

Felix.Li · Felix.Li

问题描述:
获取点击事件

问题回答:
我这边倒是大概做了一个Demo:

wyn-export-20240325175658.zip (4.6 MB, 下载次数: 1921)

Felix.Li · Felix.Li

其实针对这个，我们这边做了讨论，其实整体也不难，假如选择到子节点了。只需要向上寻找父节点就可以了。

相当于我们定义一个数组，这个数组有所有机器名字的数组。然后找到父元素，看父元素在不在数组里面，在的话就显示就可以了

var pickInfo = scene.pick(scene.pointerX, scene.pointerY);
if (pickInfo.hit) {
// 点击到了模型，执行你需要的操作
var pickedMesh = pickInfo.pickedMesh;
while(!isModel(pickedMesh,nameList)){
pickedMesh = pickedMesh.parent
}
console.log("父节点名称:", pickedMesh.name);
}

复制代码

isModel就是一个遍历是否是要输出的名字。名字对了，就是相当于执行我们的逻辑。

2.然后关于在点击执行的事件，其实我们也是DIV集成，我们完全可以在自己的代码里面写好，然后挂载在window对象上。
相当于注册或这调用的时候，在我们的代码里面使用 window.active()。
当然也只是为了防止代码太多，使用起来方便

胡涂涂 · 胡涂涂

Felix.Li 发表于 2024-4-1 14:42
其实针对这个，我们这边做了讨论，其实整体也不难，假如选择到子节点了。只需要向上寻找父节点就可以了。
...

如果我用Iframe嵌入的话也可以实现吗

胡涂涂 · 胡涂涂

Felix.Li 发表于 2024-4-1 14:42
其实针对这个，我们这边做了讨论，其实整体也不难，假如选择到子节点了。只需要向上寻找父节点就可以了。
...

这个demo 我没有导入到系统里，没导入权限。

Eden.Sun · Eden.Sun

胡涂涂发表于 2024-4-8 13:35
这个demo 我没有导入到系统里，没导入权限。

您可以找有管理员权限的同事给您导入呢。
或者您在您的本地安装一个环境，导入之后也是可以查看效果的。

胡涂涂 · 胡涂涂

Eden.Sun 发表于 2024-4-8 17:19
您可以找有管理员权限的同事给您导入呢。
或者您在您的本地安装一个环境，导入之后也是可以查看效果的。

我导入进去了仪表盘里那个点击设备看到了设备名称，但是没看到具体的实现方式啊

胡涂涂 · 胡涂涂

好的我试一下十分感谢

Felix.Li · Felix.Li

		自动登录	找回密码
密码			立即注册

[已处理] 自建html界面用div或iframe方式嵌入3D，获取3D里的点击事件

最佳答案

9 个回复

Wyn高级认证

Wyn认证