在 ThreeJS 中缩放 OBJ 的一部分 [英] Scale part of an OBJ in ThreeJS

问题描述

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

I have an .obj file that looks like this:

我需要能够做的是仅缩放手柄的特定部分 - 在这种情况下，手柄从顶部实际弯曲的点.因此，在这种情况下，我希望能够使它们更长.

What I need to be-able to do is scale only a certain part of the handles - in this case the point at which the handles actual bend down from the top. So I'd want to be-able to make them longer in this case.

有没有人有任何方向或示例说明如何实现?我看到的所有示例都只是扩展了整个模型，而不仅仅是其中的一部分.

Does anyone have any direction or an example of how this can be accomplished? All of the examples I have seen are just on scaling the whole model and not just part of it.

我想我需要根据 obj 中的顶点创建一个样条曲线，然后操作创建的样条曲线，但我希望有更简单的选择，因为我不知道如何组合带样条的模型

I was thinking that I'd need to create a Spline based off of the vertices in the obj and then manipulate the Spline created but I was hoping there'd be any easier option as I don't know how to combine the model with the Spline

谢谢

EDIT 我相信答案不在于样条曲线——它实际上在于改变对象的目标属性.当我进一步了解时，我会在这里发布，或者，如果有人知道我的意思，请指出正确的方向.

EDIT I believe that the answer doesn't lie with Splines - it in fact lies with morphing the target attributes of the object. I'll post here when I get further on or, if anyone knows what I mean then please point me in the right direction.

EDIT 2 按照零的建议，我尝试将 SkinnedMeshes 与骨骼一起使用.我正试图填充 skinIndices &skinWeights 带有 Vector4 对象，但 Typescript 抛出错误:

EDIT 2 Following zero's suggestion I'm attempting to use SkinnedMeshes with bones. I'm at the point of trying to fill the skinIndices & skinWeights with Vector4 objects but Typescript is throwing an error:

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

Argument of type 'Vector4' is not assignable to parameter of type number

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

I know this is a Typescript problem rather than a ThreeJS problem but I created a jsfiddle that has the same code but the array for skinIndices in it is of type Vector4. The only reason I can think of that mine isn't is because I'm sending the BufferedGeometry of the .obj object through the THREE.fromBufferGeometry function:

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

我解决了上述问题，现在有了这个(蓝色手柄是蒙皮网格，里面有许多骨骼，垂直的蓝绿线是骨架助手):

I fixed the problem described above and now have this (the blue handle is the skinned mesh with numerous bones inside of it & the vertical blue & green line is the skeleton helper):

我还添加了 DATGUI 助手，如下所示:

I've also added in the DATGUI helper which looks like this:

但我似乎仍然无法恰到好处地缩放网格.屏幕截图中手柄的打结部分应始终保持相同的大小.当我缩小它们时，我只需要它们下方的手柄部分可以延伸，并希望打结的部分在袋子变大时向侧面缩放.

But I still can't seem to scale the mesh just right. The knotted parts of the handle in the screenshot should always stay the same size. I just need the handle part below them to extend when I scale them down and want the knotted parts to scale sideways when the bag gets bigger.

推荐答案

据我所知，您正在尝试使网格变形.网格变形的原理有两种:

From what I understand, you are trying to deform your mesh. There are 2 principle ways to do mesh deformation:

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

变形目标

变形目标允许您定义多个变换目标"或关键帧，您可以在它们之间混合网格.这通常用于为网格设置动画.变形目标是冗长的.它们基本上是网格的复制品，但每个顶点都转换为您希望目标的外观.它们允许对顶点进行非常细粒度的操作，因为您可以规定每个关键帧的每个顶点的精确变换.但是，如上所述，它们是冗长的.您必须以某种方式让每个变形目标可用，以便您可以将这些目标混合在一起.

Morph Targets

Morph targets allow you to define multiple transform "targets", or keyframes that you can blend your mesh between. This is usually used to animate a mesh. Morph targets are verbose. They are basically a duplication of your mesh, but with each vertex transformed to the way that you want the target to look. They allow for very fine-grained manipulation of vertices because you are able to dictate the exact transform of each vertex per keyframe. However, as stated above, they are verbose. You have to have each morph target available in some fashion so that you can blend the targets together.

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

If you have a 2000 vertex polygon and 3 morph targets, you'll have to keep the definition of 6000 vertices on hand.

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

Another way to control vertex transforms is to use bones. Bones allow you to add multiple transform influences to a vertex and, in a way, group vertices together so that you can transform the bone to get the mesh deformation that you want, rather than having to manually adjust individual vertices.

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

You are still going to define transform keyframes, but you are going to define them for the bones instead of the individual vertices. This has the benefit of conserving space and enabling transform reuse. Rather than having to define new transforms for every vertex in a mesh, you define a "skin" binding a mesh to a skeleton and the skeletal animation should act appropriately.

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

In your case, I am not sure which would be the more appropriate technique to apply. I think that a skin would help because you could set the weight of all of the vertices in the handle that you want to transform to the bone and then leave off the weightings of the knots and bag. Then you could apply whatever transforms you need to make.

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

three.js has support for Skinned Meshes. You can see the API and a demo here: Skinned Meshes.

这篇关于在 ThreeJS 中缩放 OBJ 的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！