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

Question

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

例如,在这个三个例子中,

我怎么能改变它,所以不是在盒子上做小点,点击框会打开另一个页面,如超链接？

Answer 1

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

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

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

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

现在我们在这里使用一个方法raycasting来检测鼠标点击,因此在点击鼠标时,我们在垂直于点击的平面上投射一条光线(不可见),我们捕获光线相交的所有物体.

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

要更好地理解光线投射和对象拾取,请参阅本教程.

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

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

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

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

JSFiddle链接