Всплывающая подсказка в three.js

То, что вы ищете, называется "Raycasting", и вы найдете дополнительную информацию в документации и примеры.

С помощью Raycasting вы получите информацию о том, какой объект в данный момент находится под курсором мыши. Исходя из этого, вы можете заполнить данные во всплывающей подсказке и расположить ее, используя позицию мыши (в качестве альтернативы, используйте что-то как это, чтобы вычислить экранную позицию 3D-объекта и разместить всплывающую подсказку там).

Я начал с ответа Мартина Шухфуса в качестве основы для этого ответа:

Делаем это с помощью DOM:

То, что вы ищете, называется "Raycasting", и вы найдете дополнительную информацию в документации и примеры.

С помощью Raycasting вы получите информацию о том, какой объект в данный момент находится под курсором мыши. Исходя из этого, вы можете ввести данные во всплывающую подсказку и расположить ее, используя положение мыши.

В качестве альтернативы, используйте что-то как это, чтобы вычислить экранную позицию трехмерного объекта и разместить там всплывающую подсказку DOM в координатах экранного пространства.

Создание всплывающих подсказок с помощью DOM - самый простой способ, но недостатком является то, что вы не получаете преимуществ рендеринга WebGL, если хотите делать такие вещи, как добавление блеска, тени, рельефных карт и т. д. К своим всплывающим подсказкам.

Сделать это с помощью WebGL сложнее:

Используйте что-то как это, чтобы вычислить положение трехмерного объекта на экране и разместить там всплывающую подсказку в координатах экранного пространства.

Затем вам нужно выяснить, как ориентировать контент относительно вашей камеры Three.js, чтобы размер и положение элементов находились в пространстве экрана. Для этого см. Эти сообщения на форуме Three.js:

• https://discourse.threejs.org/t/solved-how-do-we-size-something-using-screen-pixels/1177
• https://discourse.threejs.org/t/easiest-way-to-make-positive-y-axis-go-downward-without-using-scale/1333/3

Как только вы выясните, как рисовать в пространстве экрана в Three.js, вы можете использовать методы, упомянутые в предыдущем разделе Making it with DOM, чтобы определить, где в пространстве экрана вы хотите рисовать всплывающие подсказки WebGL.

Чтобы нарисовать всплывающие подсказки WebGL, у вас есть несколько вариантов:

• Нарисуйте все элементы в одной сцене. Вы можете настроить renderOrder объектов, чтобы элементы пользовательского интерфейса всегда отображались поверх них. См. three.js: как управлять порядком рендеринга
• Нарисуйте элементы на четырехугольнике (PlaneGeometry) в виде текстуры (для этого вам нужно будет узнать о цели рендеринга), затем используйте вышеупомянутый метод renderOrder (или аналогичный, см. Ссылку на предыдущий маркер), чтобы убедиться, что этот четырехугольник отображается сверху. из всего.
  • В качестве альтернативы визуализируйте четырехугольник поверх сцены с помощью эффекта постобработки, чтобы гарантировать, что он всегда отображается поверх сцены, не нарушая порядок визуализации исходной сцены. Для этого вам понадобится узнать о постобработке.
• Визуализируйте материал WebGL экранного пространства во вторую сцену Thee.js на втором холсте, а затем просто поместите второй холст поверх первого, используя методы DOM. Это также гарантирует, что элементы пользовательского интерфейса не будут мешать порядку рендеринга первой сцены, но этот подход может использовать больше всего ресурсов.

Первый из трех вариантов может быть самым быстрым, но самым трудным. Последний из трех вариантов может быть самым простым, но самым медленным (но, возможно, это не имеет значения в вашем случае, в зависимости от того, что вы пытаетесь нарисовать).

Я не перечислил все возможные варианты. Есть и другие способы сделать это! Кто-то не стесняется редактировать это, чтобы добавить больше возможных способов или больше деталей.

Не стесняйтесь задавать и другие вопросы, тогда, возможно, я смогу расширить ответ.