使用 three.js 在多维数据集中制作图片库

Question

我正在迈出学习 javascript 编码的第一步，现在我正在尝试使用 three.js 的 webgl

问题是我正在尝试找到一个起点来制作一个将在 x 轴上缓慢旋转的立方体。

这个立方体将有 4 种不同的纹理（图像和文本），如果我单击一个纹理，它会将我链接到页面或站点。

我发现制作交互式立方体很容易。 three.js 站点中有很多示例，但是如何让立方体的每一面都具有交互性呢？

你有什么建议吗？

Answer 1

1. 您可以有 4 个面朝外的平面，而不是一个盒子，每个平面都有一个带有纹理的材质。
2. 每个平面都有一个 ID
3. 会有一个列表，列出每个 id 对应的 URL
4. 在场景中添加 onclick（基本上它是将鼠标的 X、Y 转换为从相机投射光线）Detect clicked object in THREE.js

您可以使用 Object3D 作为父对象对它们进行分组，然后仅旋转父对象。