"Liquify" поверхность сетки точек в Three.js

Question

Я загрузил сетку из файла JSON, вот мой текущий результат:

мой проект

Это объект, который я экспортировал из Blender как JSON, а затемиспользовал свои вершины для создания геометрии точек (THREE.Points) (что важно для ее внешнего вида)

Сейчас я ищу способ «оживить» точки, чтобы «поверхность»выглядит ярко / живой.Так что в основном это должно двигаться немного, что-то вроде этого (без поворота):

Ссылка на анимированный Gif

Я исключил смещениеMap, так как это делаетне работает для PointsMaterial (или кто-то знает обходной путь?)

У кого-нибудь есть подсказки или идеи?Я подумал о том, чтобы изменить 2-3 объекта ... но я не уверен, что это сработает для сетки точек.

Answer 1

Один из подходов для достижения желаемого эффекта - использовать целевую анимацию морфинга (также называемую морфингом вершин).Как вы можете видеть в следующем примере, three.js поддерживает морфирование целевых анимаций с точками.

https://threejs.org/examples/webgl_morphtargets_sphere.html

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