Морфинг текстурной карты - PullRequest
Новая
       50

Морфинг текстурной карты

0 голосов
/ 16 мая 2018

Я занимаюсь археологией 3D-кода.Мой оригинальный код, написанный> 10 лет назад в OpenGL + XMLisp, сделал красивый морфинг Моны Лизы всего с 30 строками кода.Код написан на Лиспе и, вероятно, не сильно поможет ( в этой могиле кода Google ).Но в основе лежит сетка, тесселяция изображения, включающая две вершины, которые управляются через переменную «счастья»:

Это работает очень хорошо, но мне нравится переписывать это в three.js, не катя мой собственный шейдер.Поскольку я просмотрел документацию, я просто не знаю, с чего начать.Мне просто нужна треугольная сетка, сохраняющая постоянные координаты текстуры xt, yt, но меняющая x, y, чтобы изменить изображение.Я не могу себе представить, что это должно быть намного больше в three.js

На случай, если вам интересно, для чего это на самом деле используется.Мы использовали эту технику, чтобы создать хороший симулятор анатомии человека в реальном времени с морфирующими иллюстрациями из Анатомии Грея: К сожалению, осталось только видео с низким разрешением на YouTube: https://www.youtube.com/watch?v=39NJJC1Vt18

Будем весьма благодарны за любые указатели.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Я думаю, что вы ищете базовый класс Geometry . Сделайте несколько треугольников: 

var geometry = new THREE.Geometry();
geometry.vertices.push(
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 1, 0, 0 ),
    new THREE.Vector3( 0, 1, 0 )
);
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faceVertexUvs[ 0 ].push(
    new THREE.Vector2( 0, 0 ),
    new THREE.Vector2( 1, 0 ),
    new THREE.Vector2( 0, 1 )
)

Тогда трансформируй это: 

geometry.vertices[ 0 ].set( 2, -1, 400 );
geometry.verticesNeedUpdate = true;
0 голосов
/ 16 мая 2018

Звучит довольно просто.

Вы делаете

var plane = new THREE.Mesh(new THREE.PlaneGeometry(),new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("YourImage.png")}));

добавьте его в свою сцену ... затем получите plane.geometry.vertices и деформируйте их вручную, а затем выполните plane.geometry.verticesNeedUpdate = true, чтобы изменения отразились на GPU.

Если вам нужна помощь 1 на 1, не стесняйтесь присоединиться к нашему свободному каналу three.js и опубликовать что-нибудь в #general:)

Ура!

https://join.slack.com/t/threejs/shared_invite/enQtMzYxMzczODM2OTgxLWE5OTU4OTYxZTZlODk1ZGNjODIyMDZlODM4ZmUyMzNiOWIxMmFjNTYwOTc4MjU0ZmNiODk5MzZiMGJhMTkzZWI

...