three.js 3D模型作为超链接

Question

我正在尝试找出一种使用Three.js创建的3D模型作为超链接的方法。换句话说，如果我点击一个立方体（THREE.CubeGeometry），我希望打开另一个页面。

例如，在this threejs.org example中，如何更改它，以便点击盒子会像超链接一样打开另一页？

- lisa

---

嗨，Lisa，欢迎来到SO。这可以通过threejs与一些自定义JavaScript的组合实现，但是请问一下，重定向链接（超链接）对于每个立方体（或对象）是否相同？ - Shiva

哦，Shiva！感谢您的快速回复！我希望每个立方体都是一个不同的链接。我刚刚找到了一些关于“tquery”的信息，所以我正在狂热地研究它...虽然我不确定我是否能完全理解它。哈哈。再次感谢！ - lisa

Answer 1

实现这一目标的一种方法是，在每个立方体创建时关联自定义 userData(URL)。

以下是一个示例代码，展示了如何在立方体生成时将数据放入其中（在 jsfiddle 中的类似逻辑在第25至63行之间使用）。

var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
            color: Math.random() * 0xffffff }));  

object.userData = { URL: "http://stackoverflow.com"};

现在我们使用一种称为 raycasting 的方法来检测鼠标点击。因此，原则上当鼠标被点击时，我们会在垂直于点击的平面上投射一条光线（无形的），并捕获光线相交的所有对象。

然后，我们从相交对象列表中检索第一个对象，因为它将最接近屏幕。

要更好地理解射线投射和物体拾取，请参考此教程。

创建立方体时，我们已经插入了数据，因此我们可以从相交的立方体中简单地检索（URL）并将用户重定向到该页面。

示例代码如下（位于fiddle的第95行）：

if (intersects.length > 0) {
        window.open(intersects[0].object.userData.URL);
    }

以下是一份可用的jsfiddle代码，希望能对您有所帮助

JSFiddle链接

- Shiva

---

Shiva！你是上天派来的！非常感谢你！<3！ - lisa

@lisa：感谢您的评论，如果这个解决方案解决了您的问题，您可以接受答案（通过选择绿色的勾号），否则如果您有其他问题也可以继续提问。 :) - Shiva

@Shiva 这是一个非常棒的答案，伙计！感谢你分享这个。 - Jean-Michel Provencher

@Shiva - 嘿Shiva，感谢你的好答案！使用这种技术intersects[0]是一个带有多个属性的对象，即交点的distance，交叉的面等。但是，这仅适用于射线进入相交对象的入射点。是否有方法可以获取光线退出对象的位置的所有信息？ - Matteo

@Shiva - 我在这里找到了答案（http://threejs.org/docs/api/core/Raycaster.html），如果你感兴趣的话：对于网格，面必须指向射线的起点才能被检测到；射线穿过面背面的交点将不会被检测到。要同时对物体的两个面进行碰撞检测，需要将材质的side属性设置为THREE.DoubleSide。 - Matteo

Answer 2

在这种情况下，3Dink.js非常有用。 它是three.js的包装库，用于WebGL，可以轻松制作3D超链接。

在最短的情况下，它可以在3行代码中实现点击和光发射。

DDDINK.addURL(object, "https://www.npmjs.com/package/3dink");
DDDINK.readRendererObj( renderer, scene, camera );
DDDINK.domEvent.addFnc();

请浏览它的代码库。 https://github.com/takashift/3Dink.js

- higechira

Answer 3

你可以通过修改这个函数来实现：

function onDocumentMouseDown( event ) {

    // ......

    if ( intersects.length > 0 ) {

        switch(intersects[0].object) {
            case google_object:
                window.open('http://google.com');
                break;
            case yahoo_object:
                window.open('http://yahoo.com');
                break;
        } 

    }

    // ......
}

- parchment

---

嗯，我尝试了这个，但似乎不起作用。我肯定是没有正确实现它... - lisa

好的，既然你提到了tquery，他们有一个示例看起来正是你想要的。http://jeromeetienne.github.io/tquery/plugins/linkify/examples/ - parchment

好的，我会用tquery试试看！我刚才在想可能有一个非常简单的解决方案，但是我没能看到。再次感谢！ - lisa