Geometry -> buffergeometry migration

[Mike_van_Luik]

Hi! I am new to three js. But my dive was amazing so far. Thanks a lot for this great project.
I found a nice demo here:

This is done in r70.
I am trying to update it to the current version (0.134.0)
This worked out quite okay.
Shadow is working again, the lion looks happy, all good.
But I have one major problem concerning the lions body.
The author of this nice demo used the buildin (geometry based) CylinderGeometry of r70.
He manipulates this standard geometry to his needs and sets a few positions new.

var bodyGeom = new THREE.CylinderGeometry(30,80, 140, 4);
  // body
  this.body = new THREE.Mesh(bodyGeom, this.yellowMat);
  this.body.position.z = -60;
  this.body.position.y = -30;
  this.bodyVertices = [0,1,2,3,4,10];   // <---- -the "magic" part
  
  for (var i=0;i<this.bodyVertices.length; i++){
    var tv = this.body.geometry.vertices[this.bodyVertices[i]];
    tv.z =70;
    this.bodyInitPositions.push({x:tv.x, y:tv.y, z:tv.z});
  }

And when turning on the fan - or when moving the mouse - he “bends/moves” the body. Nice idea:
Here i.e. look to the mouse pointer

  for (var i=0; i<this.bodyVertices.length; i++){
     var tvInit = this.bodyInitPositions[i];
      var tv = this.body.geometry.vertices[this.bodyVertices[i]];
      tv.x = tvInit.x + this.head.position.x;
  }
  this.body.geometry.verticesNeedUpdate = true;

So - this makes all sense for me.
The BufferGeometry - from my point of view - makes this impossible - as the vertices array from old geometry can not be migrated to buffergeometry

  this.bodyVertices = [0,1,2,3,4,10];

This array hold the “important” vertices which makes the body able to “bend/move”.

I tried it naive - but failed (of course)

  const positionAttribute = this.body.geometry.getAttribute("position");
  const vertex = new THREE.Vector3();

  for (var i = 0; i < this.bodyVertices.length; i++) {
    vertex.fromBufferAttribute(positionAttribute, this.bodyVertices[i]);
    positionAttribute.setXYZ(this.bodyVertices[i], vertex.x, vertex.y, 70); // write coordinates back
    this.bodyInitPositions.push({ x: vertex.x, y: vertex.y, z: 70 });
  }

This one here - has the same issue - without success:

Change vertex position with BufferGeometry

Hey Guys, im trying to migrate from Geometry to BufferGeometry. I have a few cases where I was using BoxGeometry as initial Geometry and manipulated each vertex to fit my needs. // Y // | // | // | // |4 +--------+ 1 // | /| /| // |/ | / | // 5 +--|-----+ 0| // | | | | // | 6+_____|__+3 // | / | / // |/ |/ // 7 +--------+ 2-------- X With th…

Any ideas how this could be solved?

[Lawrence3DPK]

As far as I’m aware, what used to be know as vertices in older versions (prior r125) of geometry are now targeted as the index of buffer geometry positions, so, yourBufferGeometry.index[i] I think… Please correct if wrong community

[orion_prime]

cute

if possible just make the geometry once and rotate & scale the mesh instead of manipulating the each vertex

and this might help Three.js Custom BufferGeometry

[Mugen87]

@Lawrence3DPK

As far as I’m aware, what used to be know as vertices in older versions (prior r125) of geometry are now targeted as the index of buffer geometry positions, so, yourBufferGeometry.index[i] I think… Please correct if wrong community

I’m afraid that is not a clear descirption.

Vertices are always stored in the position buffer attribute.

If the geometry has no index, three consecutive vertices represent a triangle.

If the geometry has an index, a triangle is represented by three consecutive indices which point to vertices in the position buffer attribute.

[hofk]

@Mike_van_Luik

The BufferGeometry - from my point of view - makes this impossible - as the vertices array from old geometry can not be migrated to buffergeometry

You have to redefine the geometry as buffer geometry.
Then you can manipulate the vertices of the buffer geometry.
Simple examples in the Collection of examples from discourse.threejs.org .

see first CurvedArrowHelper

and than
SpiralFromCylinder
ColorWave