纹理贴图变形答案

【问题标题】：Texture map morphing纹理贴图变形
【发布时间】：2018-05-17 05:51:30
【问题描述】：

我正在做 3D 代码考古。我在 10 年前用 OpenGL + XMLisp 编写的原始代码做了一个 nice morph of Mona Lisa，只有大约 30 行代码。该代码在 Lisp 中，可能不会有太大帮助 (in this google code grave)。但核心是一个网格对图像进行细分，其中包括两个通过“幸福”变量控制的顶点：

这很好用，但我喜欢在 three.js 中重写它而不滚动我自己的着色器。当我浏览文档时，我什至不知道从哪里开始。我只需要一个三角形网格，保持 xt、yt 纹理坐标不变，但改变 x、y 以变形图像。我无法想象这在三个.js 中应该更大

如果您想知道它的真正用途是什么。我们使用这种技术在 Gray's Anatomy 的实时变形插图中创建了一个很好的人体解剖模拟：遗憾的是，只剩下低分辨率的 youtube 视频：https://www.youtube.com/watch?v=39NJJC1Vt18

任何指针将不胜感激。

【问题讨论】：

请以文本形式显示原始代码以及解决的任何尝试

标签： three.js texture-mapping

【解决方案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。

如果您需要一对一的帮助，请随时加入我们的three.js slack 频道并在#general 中发布一些内容：)

干杯！

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

【讨论】：

您可能想详细说明关于 slack 频道的“我们”是谁。我知道（或至少可以肯定）您是 three.js 的贡献者，但这并不意味着每个人都这样做。 IMO，最好发布一个链接到threejs.org（threejs-slack.herokuapp.com）上列出的松弛频道而不是随机邀请。

【解决方案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;

【讨论】：