Получить локальную позицию для объекта в React-three-fiber

#reactjs #three.js #react-three-fiber

Вопрос:

Брифинг: я пытаюсь привязать элемент «drei Text» к точке на внешней стороне сферы рядом с выводами в сцене react-three-fiber. Так что, когда сфера поворачивается или камера вращается вокруг сферы, положение текста центрируется на внешней стороне сферы.

Пример: three.js выравнивание текста

Вопросы:

Как мне найти позиции объекта или частей / точек объекта в локальном и мировом пространстве?

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

Имеет ли сцена мировое положение относительно оси в [0,0,0] и локальное положение относительно объекта?

Моя песочница кода: земля с местоположениями

1. Я обнаружил, что если вы хотите добавить HTML-текст в сцену, вы можете импортировать HTML-текст с помощью drei и поместить его внутри тегов сетки; при условии, что ваша родительская сетка имеет ось, центрированную вокруг себя. Причина, по которой это не работает в моей сцене, заключается в том, что каждая ось пирамид указателей центрируется на [0,0,0], а не в каждом местоположении пирамиды. Но у меня все еще есть проблема, из-за которой HTML не скрывается, когда что-то должно его скрывать или когда оно находится вне поля зрения. Я считаю, что это решается с помощью raycasting или чего-то в этом роде.

Ответ №1:

Проверьте Object3d, базовый класс для многих объектов в three.js , включая саму сцену. Он имеет свойства и функции, которые могут помочь вам, например .position и .getWorldPosition() .

Обратите внимание, что положение любого объекта в сцене относительно его родительского. Вы можете добавлять дочерние элементы к объекту с помощью .add(дочерний), но лучшим способом группировки объектов может быть группа.