在Three js中创建3D模型上的可点击区域

Question

我正在为游戏玩家创建一个新的啤酒品牌网页。

到目前为止，我已经在三个js中创建了一个旋转的啤酒罐。我找到了一个GLTF模型，使用Drei和Fiber制作了纹理，添加了照明和反射——所有简单的基础知识。

我现在想要实现的是使用啤酒罐作为页面的导航。因此，如果您将鼠标移到容器表面的徽标上，徽标应该改变颜色以指示您可以单击它，如果您单击它，则会发生一些事情(假设打开一个模态)。然后，您可以旋转罐头，并点击它的不同部分(一些文本，图标，条形码等)，以获得不同的内容。

我不确定我将如何实现这一点或接近这一点。我有几个不同的想法:

1. 以某种方式在模型上映射可点击的区域。这似乎不可能。
2. 使所有不同的可点击部分在模型中单独的对象。这似乎是一项繁重的工作，我必须花很多时间学习Blender。罐头模型非常简单(目前使用的是sketchfab.com上的免费模型)。
3. 使用css3drenderer将html元素映射到can上。但是我没有找到一种方法把它很好地弯曲到罐子上，而且我似乎不能用这个模型来做到这一点。
4. 在罐子上使用许多带有alpha的纹理，并以某种方式寻找每个图层的透明度。没有找到任何方法来做这个。

对于使用什么技术来实现这一点有什么想法吗?我在Unity中做过游戏开发，但我是Three js和WebGL的新手，所以很难知道从哪里开始搜索。

Answer 1

常用的方法是使用raycasting来检测与模型的交互。

你真正要找的是一个hyperlink。虽然您不能手动将hyperlink应用于three.js，但您可以使用THREE.Raycaster()作为漏洞。

一旦确定模型被单击，只需执行以下操作来重定向用户:

window.location.href = 'https://example.com/'

应该可以了~

编辑:

下面是一个例子，基于我对你的评论的回复:

if(intersects.length > 0){
if(intersects[0] == model.children[2]){ //Second child
window.location.href = 'https://example.com/'
}
}