我正在尝试找出一种方法来使用使用 Three.js 创建的 3D 模型作为超链接。换句话说，如果我单击一个立方体（一个 THREE.CubeGeometry），我希望打开另一个页面。
我怎样才能改变它，而不是在盒子上画小点，点击盒子会打开另一个页面，就像一个超链接？
【问题讨论】：
标签： javascript hyperlink 3d three.js raycasting
在这种情况下，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
【讨论】：
实现它的一种方法是将自定义 userData(URL) 与创建的每个多维数据集相关联。
所以这里有一个示例代码，我们如何在生成数据时将数据放入多维数据集中（在 jsfiddle 中，第 25-63 行之间使用了类似的逻辑）
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 希望它有所帮助
【讨论】：
intersects[0] 是一个具有多个属性的对象，即相交的distance，与哪个面相交等。但是，这仅适用于相交对象内的射线的入口点。有没有办法获取射线退出对象位置的所有信息？
你可以通过修改这个函数来做到这一点：
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;
}
}
// ......
}
【讨论】：