Тессеракт в three.js?

Я пытаюсь построить тессеракт (ну, диаграмму Шлегеля; см. страницу Википедии) на самом деле это просто набор точек в пространстве, некоторые пары которых соединены линиями. На самом деле я хочу сделать две вещи:

  1. Сделать такую ​​форму
  2. Перемещайте его мышью, чтобы рассмотреть его с разных сторон.

Я уверен, что оба они тривиальны в three.js, но я не могу понять, как это сделать. Перемещение многогранников мышью замечательно показано здесь, но библиотека Polyhedron, насколько Я могу сказать, проецирует все точки на сферу. На этой странице, например, не показаны звездчатые многогранники.

Я рассмотрел пример куба, приведенный в документации но я не уверен, как это сделать: эта страница предполагает более глубокие базовые знания о three.js, чем у меня есть сейчас.

Я также подумал бы, что перемещение с помощью щелчка и перетаскивания мышью будет встроено, но, может быть, нет? Такой пример, как это, по-видимому, требует большого количества прослушивателей событий. .

Во всяком случае, мои поиски нашли много частичных решений, но нигде нет простого примера для начинающих точек в пространстве, соединенных линиями, а вся фигура просматривается в интерактивном режиме с помощью мыши.

Если такой пример существует, я был бы очень рад, если бы мне на него указали!


person Alasdair    schedule 08.10.2020    source источник


Ответы (2)


Похоже, вы захотите начать с самого начала. Creating a scene закладывает основу для создания сцены three.js. и заполнение его камерой и формой сетки.

Затем просмотрите OrbitControls/TrackballControls для управления камерой с помощью мыши.

Затем посмотрите на формы, которые вам нужны. Чтобы нарисовать его, как пример из Википедии, вам понадобятся SphereBufferGeometry и < a href="https://threejs.org/docs/#api/en/geometries/CylinderBufferGeometry" rel="nofollow noreferrer">CylinderBufferGeometry.

Как только вы начнете рисовать вещи на основе базового примера, вы заметите, что цвета выглядят довольно плоскими. Чтобы добавить глубины, вам нужно добавить хотя бы один источник света (например, PointLight< /a>) и замените материал затененным, например MeshLambertMaterial или MeshLambertMaterial.

Вы также можете многому научиться, просмотрев код примеров.

Если у вас есть что-то надежное и работающее, если оно все еще не работает так, как вы ожидаете, вернитесь и задайте дополнительные вопросы!

person TheJim01    schedule 12.10.2020

https://github.com/justintefteller/Tesseract

Это грубый базовый набросок тессеракта в threejs.

Просто небольшой набросок, но он должен приблизить вас к общей идее.

person jteftell    schedule 02.06.2021