三.js 3d 模型作为超链接 [英] three.js 3d models as hyperlink

问题描述

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

例如，在.

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

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

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

这里是一个有效的 jsfille，希望对您有所帮助

JSFiddle 链接

I'm trying to figure out a way to use a 3D model created with Three.js as a hyperlink. In other words, if I click on a cube (a THREE.CubeGeometry), I want another page to open.

For instance, in this threejs.org example,

how can I change it, so that instead of making little dots on the boxes, clicking on the boxes would open another page, like a hyperlink?

解决方案

One way to achieve it will be to associate custom userData(URL) with every cube while its being created.

So here is a sample code how we can put data in cubes while they are being generated(in jsfiddle similar logic is used between line 25-63)

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

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

Now here we use a method called raycasting to detect mouse click, so in principal when the mouse is clicked, we cast a ray(invisible) in the plane perpendicular to the click and we capture all the objects that the ray intersected.

Then we retrieve the first object from the list of intersected objects because that will be near most the screen

To better understand raycasting and object picking refer to this tutorial.

Now while creating the cubes we already inserted the data so we can simply retrieve(URL) it from the intersected cube and redirect the user to that page.

The sample code will be something like this(at line number 95 in the fiddle )

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

Here us a working jsfille hoping it helps

JSFiddle Link

这篇关于三.js 3d 模型作为超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！