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

Question

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

例如，在 this threejs.org example 中,

我怎样才能改变它，而不是在方框上制作小点，点击方框会打开另一个页面，比如超链接？

Answer 1

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

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

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

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

现在我们使用一种称为光线转换的方法来检测鼠标点击，所以原则上当鼠标被点击时，我们在垂直于点击的平面上转换一条光线(不可见)，我们捕获所有射线相交的对象。

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

要更好地理解光线转换和对象拾取，请参阅 this tutorial .

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

示例代码将是这样的(在 fiddle 的第 95 行)

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

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

JSFiddle Link