Question

我在做3D代码考古学。我的原始代码，写着＆gt; 10年前在OpenGL + XMLisp中做了nice morph of Mona Lisa只有大约30行代码。代码在Lisp中，可能没什么用处（in this google code grave）。但核心是一个网格细分图像，包括两个顶点，通过＆＃34;幸福＆＃34;变量：

这非常有效，但我喜欢在three.js中重写它而不用滚动我自己的着色器。正如我查看文档一样，我不知道从哪里开始。我只需要一个三角形网格，保持xt，yt纹理坐标不变，但改变x，y来变形图像。我无法想象这应该在three.js中大得多。

如果你想知道它真正用于什么。我们使用这种技术来实时模拟人体解剖结构，从Gray's Anatomy中实时变形插图：可悲的是，只有低分辨率的YouTube视频留下：https://www.youtube.com/watch?v=39NJJC1Vt18

任何指针都会非常感激。

Answer 1

听起来很简单。

你做

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

Answer 2

我认为你正在寻找基本的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;

纹理地图变形

2 个答案: