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

Question

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

例如，在this threejs.org example中，

如何更改它，以便不是在盒子上做小点，点击方框会打开另一个页面，如超链接？

Answer 1

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

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

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

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

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

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

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

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

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

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

我们这里有一个希望有帮助的工作jsfille

JSFiddle Link

Answer 2

在这种情况下，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

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;
        } 

    }

    // ......
}