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

Question

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

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

Answer 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相交并且触发了click事件，那么您可以打开模式弹出窗口

有关如何使用raycaster的参考：https://threejs.org/docs/index.html#api/en/core/Raycaster