微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Tesseract在three.js中?

如何解决Tesseract在three.js中?

我正在尝试构造一个tesseract(嗯,是Schlegel图;请参见wikipedia page),它实际上只是空间中点的集合,其中一些点与线相连。我实际上想做两件事:

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

我敢肯定,这两者在three.js中都是微不足道的,但是我不知道该怎么做。 here很好地显示了多面体的鼠标移动,但是据我所知,多面体库将所有点投影到一个球体上。例如,该页面不显示星状多面体。

我看过documentation中给出的多维数据集的示例,但是我不确定如何呈现它:该页面比我当前拥有更多的three.js基础知识。

我还以为用鼠标单击和拖动来移动会是内置的,但也许不是吗? this之类的示例似乎需要大量的事件侦听器。

无论如何,我的狩猎发现了很多局部解决方案,但是没有一个简单的例子可以说明空间中的点由线连接起来的初学者,整个图形可以用鼠标交互查看。

如果存在这样的例子,我很乐意指出它!

解决方法

听起来您想从头开始。 Creating a scene为创建Three.js场景并使用相机和网格形状填充场景奠定了基础。

接下来,查看OrbitControls / TrackballControls,以使用鼠标控制相机。

然后,查看所需的形状。要像Wikipedia示例一样进行绘制,您需要SphereBufferGeometryCylinderBufferGeometry

一旦开始根据基本示例进行绘制,您会发现颜色看起来很平坦。要增加深度,您需要添加至少一个光源(例如PointLight),并将该材质替换为阴影材质,例如MeshLambertMaterialMeshLambertMaterial

通过查看the examples的代码,您还可以学到很多东西。

一旦您确定要运行的东西,如果仍然无法按预期运行,请回来并提出更多问题!

,

https://github.com/justintefteller/Tesseract

这是threejs中tesseract的蛮力基础草图。

只是一个小草图,但应该能让你接近一个大致的想法。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。