three.js 3d模型作为超链接
丽莎
我试图找出一种方法来使用通过Three.js创建的3D模型作为超链接。换句话说，如果我单击一个多维数据集（THREE.CubeGeometry），则希望打开另一个页面。
例如，在此threejs.org示例中，
我该如何更改它，以便在框上单击而不是在框上打小点，从而打开另一个页面，例如超链接？
湿婆
一种实现方法是在创建每个多维数据集时将自定义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检测鼠标单击”的方法，因此，原则上，单击鼠标时，我们在与单击垂直的平面上投射了光线（不可见），并捕获了光线相交的所有对象。
然后，我们从相交的对象列表中检索第一个对象，因为它将最靠近屏幕
为了更好地理解光线投射和对象拾取，请参考本教程。
现在，在创建多维数据集时，我们已经插入了数据，因此我们可以简单地从相交的多维数据集中检索（URL）数据并将用户重定向到该页面。
示例代码将是这样的（在小提琴中的第95行）
if (intersects.length > 0) {
window.open(intersects[0].object.userData.URL);
}
在这里，我们正在工作的jsfille希望对您有所帮助
JSFiddle链接
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在Three.js中链接3d对象
- 2
Three js 3D rotation
- 3
无法使用three.js更改3D模型的颜色
- 4
使用Three.js无法在Mapbox上加载3D模型
- 5
为什么three.js投射阴影无法在3D模型上运行
- 6
Three.js-我想在某个地方使我的爱尔兰3D模型可点击
- 7
拖动以更改Three.js场景中3D模型对象的位置
- 8
在运行时从 localfile 导入 Three.js 中的 3d 模型
- 9
Three.js中的多种3D声音
- 10
Three.js 3D文字弯曲
- 11
在THREE.js中绘制3d边界框
- 12
three.js以相同的视角显示3d对象
- 13
从jsartoolkit和three.js创建3D环境
- 14
Three.js-比例模型
- 15
Three.js光线投射THREE.Object3D
- 16
Three.js最复杂的模型
- 17
Three.js透明模型纹理错误
- 18
Three.js导入的模型抗锯齿
- 19
如何绘制Three.js模型？
- 20
Three.js模型质量很差
- 21
使用Three.js加载Maya模型
- 22
Three.js导入的模型抗锯齿
- 23
如何绘制Three.js模型？
- 24
THREE.js 加载 json 模型失败
- 25
Three.js使用framebuffer作为纹理
- 26
Three.js 3D球面看起来像2D
- 27
Three.js使用正交相机将2D映射到3D
- 28
使用three.js从2D旋转到3D
- 29
如何在three.js中从BufferGeometry绘制2D/3D网格
我来说两句