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

问题描述

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

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.

例如，在这个threejs.org例如，

如何改变它，而不是使小点的箱子，点击框将打开另一个网页，像一个超链接？这样

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?

推荐答案

要实现这将是其时正在创建与每一个立方体的自定义用户数据（URL）相关联的一种方式。

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

因此​​，这里是一个示例code，我们怎么可以把数据立方体正在生成，而他们（在的jsfiddle类似的逻辑是用来线25-63之间）

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.

现在，而从相交的立方体创建多维数据集，我们已经插入的数据，所以我们可以简单地检索（URL），并把用户重定向到该页面。

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.

样品code将（在小提琴的行号95），这样的事情

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

下面我们工作jsfille希望这有助于

Here us a working jsfille hoping it helps

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