在ThreeJS中缩放OBJ的一部分

Question

我有一个.obj看起来像这样的文件:

我需要做的只是缩放手柄的某个部分 - 在这种情况下,手柄实际从顶部向下弯曲的点.所以我希望能够在这种情况下让它们更长.

有没有人有任何方向或如何实现这一目标？我所看到的所有例子都只是缩放整个模型,而不仅仅是缩放模型的一部分.

我想我需要根据obj中的顶点创建一个Spline,然后操纵Spline创建,但我希望有更简单的选项,因为我不知道如何将模型与仿样

谢谢

编辑我认为答案不在于Splines - 它实际上取决于变形对象的目标属性.我会在这里发帖,如果有人知道我的意思,那么请指出我正确的方向.

编辑2遵循零的建议我试图使用带骨骼的SkinnedMeshes.我正在尝试用对象填充skinIndices&skinWeights,Vector4但是Typescript会抛出一个错误:

类型的'Vector4'参数不能分配给类型的参数number

我知道这是一个Typescript问题,而不是一个ThreeJS问题,但我创建了一个jsfiddle,它具有相同的代码,但其中的数组skinIndices是类型Vector4.我能想到的唯一原因是我的不是因为我发送的通过该功能BufferedGeometry的.obj对象THREE.fromBufferGeometry:

let geometry = new THREE.Geometry().fromBufferGeometry(frontHandle.children[0].geometry);

编辑3

let geometry = new THREE.Geometry().fromBufferGeometry(frontHandle.children[0].geometry);

for ( let i = 0; i < geometry.vertices.length; i ++ ) {
  let vertex = geometry.vertices[ i ];
  let y = (vertex.y + sizing.halfHeight);

  let skinIndex = Math.floor( y / sizing.segmentHeight );
  let skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;

  let vectorOne = new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0);
  let vectorTwo = new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0);

  // Here's where the compliant is
  geometry.skinIndices.push(vectorOne);
  geometry.skinWeights.push(vectorTwo);
}           

编辑4

我解决了上面描述的问题,现在有了这个问题(蓝色手柄是带有多个骨骼的蒙皮网格,垂直的蓝色和绿色线是骨架帮手):

我还添加了DATGUI帮助器,如下所示:

但我似乎仍然无法正确地缩放网格.截图中手柄的打结部分应始终保持相同的大小.当我将它们缩小时,我只需要它们下方的把手部分延伸,并且当袋子变大时希望打结的部分向侧面伸缩.

Answer 1

据我了解，您正在尝试使网格变形。进行网格变形有两种主要方法：

1. 变形目标
2. 骨骼动画

变形目标

变形目标允许您定义多个变换“目标”或可以在其之间混合网格的关键帧。这通常用于对网格进行动画处理。变形目标很详细。它们基本上是网格的复制品，但每个顶点都转换为您希望目标看起来的方式。它们允许对顶点进行非常细粒度的操作，因为您可以指定每个关键帧每个顶点的精确变换。然而，如上所述，它们很冗长。您必须以某种方式提供每个变形目标，以便您可以将目标混合在一起。

如果您有 2000 个顶点的多边形和 3 个变形目标，则必须保留 6000 个顶点的定义。

网格皮肤和骨骼

控制顶点变换的另一种方法是使用骨骼。骨骼允许您向顶点添加多个变换影响，并以某种方式将顶点分组在一起，以便您可以变换骨骼以获得所需的网格变形，而不必手动调整各个顶点。

您仍将定义变换关键帧，但您将为骨骼而不是单个顶点定义它们。这样做的好处是节省空间并实现转换重用。您不必为网格中的每个顶点定义新的变换，而是定义将网格绑定到骨架的“皮肤”，并且骨架动画应该适当地起作用。

就您而言，我不确定哪种技术更适合应用。我认为皮肤会有所帮助，因为您可以设置要转换为骨骼的手柄中所有顶点的权重，然后忽略结和包的权重。然后您可以应用您需要进行的任何转换。

Three.js 支持蒙皮网格。您可以在此处查看 API 和演示：Skinned Meshes。