Three.js 中的 Tesseract？

Question

我正在尝试构建一个超正方体（嗯，施莱格尔图；请参阅维基百科页面），它实际上只是空间中点的集合，其中一些点对用线连接。我其实想做两件事：

1. 渲染出这样的形状
2. 用鼠标移动它以从不同角度查看它

我确信这两者在 Three.js 中都是微不足道的，但我不知道如何做到这一点。鼠标移动多面体的效果非常好here，但据我所知，Polyhedron 库将所有点投影到球体上。例如，该页面不显示星状多面体。

我已经查看了文档中给出的立方体示例，但我不确定如何渲染它：该页面假设比我目前拥有更多的 Three.js 基础知识。

我还以为通过点击和拖动鼠标来移动是内置的，但也许不是？像 this 这样的示例似乎需要大量的事件侦听器。

无论如何，我四处搜寻找到了很多部分解决方案，但没有一个简单的例子适合初学者用线连接空间中的点，整个图形可以用鼠标交互查看。

如果存在这样的例子，我会很高兴指出它！

Answer 1

听起来你想从头开始。

Creating a scene

为创建 Three.js 场景并用相机和网格形状填充它奠定了基础。

接下来，查看

OrbitControls

/

TrackballControls

，使用鼠标控制相机。

然后，看看你需要的形状。要像维基百科示例一样绘制它，您需要

SphereBufferGeometry

和

CylinderBufferGeometry

。

一旦您开始根据基本示例进行绘制，您会发现颜色看起来相当平坦。要增加深度，您需要添加至少一盏灯（例如

PointLight

），并将材质替换为阴影材质，例如

MeshLambertMaterial

或

MeshLambertMaterial

。

您还可以通过查看示例的代码学到很多东西。

一旦您有了可靠的东西并正在运行，如果它仍然没有按照您的预期工作，请回来询问更多问题！

Answer 2

https://github.com/justintefteller/Tesseract

这是用 Threejs 暴力破解超正方体的基本草图。

只是一个小草图，但应该让您接近一个总体想法。

Answer 3

我在我的 gitpage 上创建了一个示例 https://delictide.github.io

您可以在此处查看用于构建的文件： https://github.com/DelicTide/5djava

获得“期望”的效果需要时间扭曲。目前只能将其“投影”到 3d 中。我们能够使用欧几里德几何之外的高级理论中可用的 w 轴来模拟投影。