Updating nearby vertices of mesh

Questions
, ,
1

I have a mesh and some control points at specific vertices. It’s okay to move the control points and position of that vertex will be update.
Now I want vertices nearby to update accordingly to controlling vertex.
My idea is:
I got an array of nearby vertices using .distanceToSquared of Vector3
then I clone the current position of the vertex I interact,
.subVectors(newPosition, clonePosition) to get the difference
then I update position of nearby vertices = resultVector.addVectors(nearbyVertexVec, subbedVec)
It did update but update too much though I move very slightly.
Is it a right way? Do you guys have any method for this? Some kind of grouping vertices.

Screenshot from 2023-11-14 13-34-19
Screenshot from 2023-11-14 13-34-191920×972 138 KB

2

Have you tried to scale down the displacement vector? Or, better, scale it down depending on the distance to the main control point, so that very close vertices are affected more than far away vertices.

2 Likes
3

I’ve check the nearby vertices, they’re correct. I custom the radius also.
But when I move up a bit, then move down, the nearby vertices keep moving up.
Because I’m using .addVectors ?

4

I have no idea. You are the only one who can debug the code and tell what is going on. Most likely .addVectors is innocent; and subbedVec is not correctly updated during dragging.

2 Likes
5

So what should I use to get the difference between last position and new position of a vertex during dragging?
Let’s say if I drag Y and Z axis of vertexA from Vector3(1, 1, 1) to Vector3(1, 3, 6). If I want nearby vertices update accordingly, I have to add the Vector3(0,2,5) - which I get from .subVectors to current position of vertexB = Vector3(2, 2, 2) for example.
=> Vector3(2,4,7) will be the new position of the nearby vertexB.

6

The general structure could be something like this:

var selectedPoints = [],
    mouse = new THREE.Vector2();

function selectPoints( )
{
   // select near-by vertices and store them in selectedPoints[]
}

function dragPoints( dx, dy )
{
   // drag selected vertices by relative mouse motion (dx,dy)
}

function onPointerDown( event )
{
   selectPoints( );
   mouse.set( event.clientX, event.clientY );
}

function onPointerUp( event )
{
   selectedPoints = [];
}

function onPointerMove( event )
{
   dragPoints( event.clientX-mouse.x, event.clientY-mouse.y );
   mouse.set( event.clientX, event.clientY );
}

When I try the above approach, I get this result:

*Apology: Lee Smith, I’m sorry for sculturings a caricature of your head

5 Likes
7

Dope video demo!
Can I see the source code of it, please?

8

Here it is:
https://codepen.io/boytchev/full/eYxGyPG

5 Likes
9

It is not matched my case but it helps a lot. Thank you so much Pavel.

1 Like
10

I took a closer look at the pen.

I tried the modification of a BufferGeometry some time ago.
However, only the modification of a vertex, an edge or a triangle.
Modify indexed BufferGeometry (mouse or input)

see modify Geo

For my current project, I’m going to try to combine the two things, i.e. also include the nearby vertices in 3D. Possibly by adding the x, y, z keys to the mouse movement to define the orientation.
That will certainly take some effort. :thinking:

2 Likes