Scale part of OBJ in ThreeJS

Question

I have a .obj file that looks like this:

What I need is to scale only a certain part of the descriptors - in this case, the point from which the handles actually bend from above. Therefore, I would like to be able to make them longer in this case.

Does anyone have any direction or example of how this can be done? All the examples I've seen are simply scaling the whole model, not just parts of it.

I thought I needed to create a spline based on the vertices in obj and then manipulate the created spline, but I was hoping there would be some simpler option since I don't know how to combine the model with the spline

thanks

EDIT . I believe that the answer does not lie on splines - it actually consists in morphing the target attributes of the object. I will send here when I go further, or if anyone knows what I mean, please point me in the right direction.

EDIT 2 Next zero sentence I'm trying to use SkinnedMeshes with bones. I am trying to populate skinIndices and skinWeights objects, but Typescript throws an error:

An argument of type 'Vector4' not assigned to a parameter of type number

I know this is a Typescript problem, not 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 this mine is not because I send the BufferedGeometry of the .obj object via the THREE.fromBufferGeometry function:

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

EDIT 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 where the compliant is geometry.skinIndices.push(vectorOne); geometry.skinWeights.push(vectorTwo); } 

EDIT 4

I fixed the problem described above and now I have this (the blue handle is a solid grid with numerous bones inside it, and the vertical blue and green line is the helper skeleton):

I also added a DATGUI helper that looks like this:

But I still can’t scale the grid accurately. The tied parts of the handle in the screenshot should always remain the same size. I just need a piece of the handle under them to stretch out when I shrink them and I want the knotted parts to be lateral when the bag gets larger.

Answer 1

From what I understand, you are trying to warp your mesh. There are 2 main ways to deform the mesh:

• Morph targets
• Skeletal animation

Morph targets

Morph targets allow you to define several transformation targets, or key frames that you can mix together. This is commonly used to animate a grid. Morph targets are detailed. They basically duplicate your grid, but each vertex is converted to how you want the target to look. They allow very fine-grained vertex manipulation, because you can dictate the exact conversion of each vertex to a keyframe. However, as indicated above, they are detailed. You must have every morph target, available in some way, so that you can mix targets together.

If you have 2,000 vertex polygons and 3 morph targets, you will need to keep the definition of 6,000 vertices handy.

Leather and bone mesh

Another way to control vertex transformations is to use bones. Bones allow you to add several transform effects to a vertex and, in a sense, group vertices together so that you can transform the bone to get the desired mesh deformation, rather than manually adjusting the individual vertices.

You will still define the keyframes of the transformation, but you are going to define them for the bones instead of the individual vertices. This helps save space and allows reuse of reuse. Instead of defining new transformations for each vertex in the grid, you define a “skin” that connects the grid to the wireframe, and skeletal animation should act accordingly.

---

In your case, I'm not sure which one will be more suitable. I think that the skin will help, because you can set the weight of all the vertices in the handle that you want to convert to bone, and then lower the weights of the nodes and the bag. Then you can apply any transformations you need to do.

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