时间戳

首页 > 解决方案 > 如何在三个 js 3d .dae 对象中添加按钮

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

问题描述

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

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

标签： three.jscollada

解决方案

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

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

推荐阅读