Three.js 纹理贴图变形

我在做3D代码考古学。我的原始代码是10年前在OpenGL+XMLisp中编写的，只使用了大约30行代码。代码是用Lisp编写的，可能没有多大帮助（）。但其核心是对图像进行细分的网格，包括通过“幸福”变量控制的两个顶点：

这工作得非常好，但我喜欢在three.js中重写它，而不用滚动我自己的着色器。当我浏览了文档后，我甚至不知道从哪里开始。我只需要一个三角形网格保持xt，yt纹理坐标不变，但改变x，y来变形图像。我无法想象这在three.js中会有多大

万一你想知道这到底是用来干什么的。我们使用这项技术创建了一个很好的人体解剖学模拟，实时变形了Gray的解剖学插图：遗憾的是，只剩下低分辨率的youtube视频：

---

任何指点都将不胜感激。

听起来很简单

你做

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 slack频道，并在#general:）中发布一些内容

干杯

我想你在找基础课。做一些三角形：

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;

请以文本形式显示原始代码，以及解决问题的任何尝试。您可能需要详细说明关于松弛通道的“我们”是谁。我知道（或者至少有一定的把握）你是three.js的贡献者，但这并不意味着每个人都是。在我看来，发布一个链接到threejs.org（）上列出的slack频道比随机邀请要好。