Очень простая реализация отображения проекции, выполненная в React с использованием шейдеров glsl, работает на любом типе поверхности, а также движется или вращается!
Вы можете проверить это в следующей песочнице -› https://codesandbox.io/s/czxbw
Краткий обзор сцены, созданной в React:
Всего несколькими строками кода я создаю сцену для нашего проекта как компонент React:
Сначала я импортирую необходимые библиотеки, CameraHelper из threejs, чтобы мы могли показать некоторые штуковины на камере, которую мы используем для проецирования текстуры.
React-three-fiber и drei импортированы, чтобы облегчить нашу жизнь, так как они предоставляют компоненты из библиотеки three js наилучшим образом подготовленными для React.
Взгляните на весь код, и я объясню в разделе кода каждую часть.
Строки 11 и 21 — это определения двух красивых сфер, которые я текстурирую текстурой земли и неба (чтобы сцена не была пустой :) )
Настоящая магия происходит в строке 31 и далее, когда я использую компонент, который я создал ниже, расширяя класс shaperMaterial, я привожу код ниже.
Здесь важно отметить, что нам нужна камера и ее координаты, поэтому я определяю объект камеры в строке 55 и обновляю координаты в дескрипторе useFrame. Затем эта информация передается компоненту ProjectedMaterial, вызываемому в строке 58.
Нам также нужна простая текстура и цвет для основы меша для областей, на которые не делается проекция, и они определены в строках 35 и 37 соответственно.
Простой шейдер, чтобы управлять ими всеми
Класс shaperMaterial является шлюзом для любой реализации шейдера в Three js, вы можете довольно легко указать все компоненты, которые вы используете в своем шейдере, в качестве юниформ в конструкторе, а затем предоставить фрагмент и вершинный шейдер.
Здесь мы получаем координаты с камеры и меняем uv-координаты нашей текстуры в соответствии с координатами на каждом кадре.
Я надеюсь, что это было полезно для вас, пожалуйста, оставьте комментарии, если вам нужна дополнительная информация!
