如何在三个 js 3d .dae 对象中添加按钮

Posted 2023-03-23

【中文标题】如何在三个 js 3d .dae 对象中添加按钮

【英文标题】：How to add a button in a three js 3d .dae object

【发布时间】：2019-11-03 14:03:33

【问题描述】：

我已导入一个 .dae 文件并将其添加到我的场景中。它托管在这里，因为我无法在 codepen 中托管：http://freelancer.ueuo.com/threejs/。

我想在摊位的前面添加一个按钮，例如“CLICK ME”（由 css 设计），然后当我单击该按钮时，我希望出现一个弹出窗口。我知道如何使弹出窗口出现。但我不知道如何在场景中添加按钮并使用光线投射器来检测它。请帮忙。

【参考方案1】：

要添加按钮，您可以在摊位前定义 BoxGeometry(https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry) 或通过此链接 (https://www.turbosquid.com/) 使用一些 3d 对象，并使用

将其放置在您的摊位前面

Object.position.set(x,y,z)

要使光线投射器能够跟踪您的对象，您可以像初始化一样

raycaster.setFromCamera( mouse, camera )

基本上，光线投射器的原点是您的相机，目标是鼠标。

现在来监听你可以使用的 3d 对象上的事件

intersects = raycaster.intersectObjects( button3dObject )

如果它与 button3dObject 相交并触发点击事件，那么您可以打开您的模态弹出窗口

raycaster使用方法参考：https://threejs.org/docs/index.html#api/en/core/Raycaster

【讨论】：

这个很有用，但是我想在css中设计按钮，然后添加到场景中！