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

Posted 2023-02-27

【中文标题】three.js 3d 模型作为超链接

【英文标题】：three.js 3d models as hyperlink

【发布时间】：2014-09-01 15:58:56

【问题描述】：

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

例如，在this threejs.org example，

我怎样才能改变它，而不是在盒子上画小点，点击盒子会打开另一个页面，就像一个超链接？

【问题讨论】：

嗨，丽莎，欢迎来到 SO，这可以通过将 threejs 与一些自定义 javascript 结合来实现，但是您能告诉我，每个立方体的重定向链接（超链接）都是相同的（或对象）还是会有所不同

天啊湿婆！感谢您及时的回复！我希望每个立方体都是不同的链接。我刚刚在“tquery”上找到了一些信息，所以我正在如饥似渴地研究它......虽然我不确定我是否会完全理解它。哈哈。再次感谢！

【参考方案1】：

在这种情况下，3Dink.js 很有用。 它是一个用于 WebGL 的 three.js 包装库，可以轻松制作 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

【参考方案2】：

实现它的一种方法是将自定义 userData(URL) 与创建的每个多维数据集相关联。

所以这里有一个示例代码，我们如何在生成数据时将数据放入多维数据集中（在 jsfiddle 中，第 25-63 行之间使用了类似的逻辑）

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

object.userData =  URL: "http://***.com";

现在这里我们使用一个叫做raycasting的方法来检测鼠标点击，所以原则上当鼠标点击时，我们在垂直于点击的平面上投射一条射线（不可见），我们捕获射线的所有对象相交。

然后我们从相交对象列表中检索第一个对象，因为它靠近屏幕的大部分

要更好地理解光线投射和对象拾取，请参阅 this tutorial。

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

示例代码将是这样的（在小提琴中的第 95 行）

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

给我们一个工作的 jsfille 希望它有所帮助

JSFiddle Link

【讨论】：

湿婆！你是上帝派来的！非常感谢你！

@lisa：感谢您的评论，如果解决方案解决了您的问题，您可以接受答案（通过选择绿色勾号），或者如果您还有其他问题，您也可以提出问题。 :)

@Shiva 这是一个非常棒的回答伙伴！感谢分享。

@Shiva - 嘿 Shiva，感谢您的出色回答！使用此技术时，intersects[0] 是一个具有多个属性的对象，即相交的distance，与哪个面相交等。但是，这仅适用于相交对象内的射线的入口点。有没有办法获取射线退出对象位置的所有信息？

@Shiva - 换句话说，我怎样才能得到一个对象与某条射线的所有交点的列表？

【参考方案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;
         

    

    // ......

【讨论】：

嗯，所以我尝试了这个，但它似乎不起作用。我确定我在某种程度上没有正确实现这一点......

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

是的，我会用 tquery 试试看！我只是在想可能有一个我看不到的非常简单的解决方案。再次感谢！