Tween InstancedMesh positions

Questions
1

Im using @prisoner849 example InstancedMesh and creating a “currentMesh” wrapper with all the instances inside. Its working fantastically except I dont want to animate (positions, quaternions, scale) inside the render loop directly. I would like to use tweens. I cannot seem to get my InstancedMeshes to animate their positions with TWEEN though. I have created a position array that holds the correct positions that I desire, from an Object3D. I then loop through all the meshes and create a tween to map the positions to the Object3D positions with:

currentMesh.geometry.attributes.instancePosition.array

I get the meshes to go to the correct position, scale, rotation, but they dont animate from their 0,0,0 positions to end positions. They just plop right to the positions. I think I’m just using the Tween wrong. Can anyone help? Banging my head on this. I think that this._valuesEnd.x is also not giving me the incremented positions. Its just giving me the end positions. How do I get the incremented value of this tween? Any help is greatly appreciated!!

Nearly Working Method:

function transformMeshes( duration ) {

    TWEEN.removeAll();

    let object, 
        target, 
        obLen = oObjects.length,
        currentMesh = cache[ getKey() ],
        index, posX, posY, posZ,
        positions = currentMesh.geometry.attributes.instancePosition.array;

        for ( let i = 0; i < obLen; i ++ ) {

               object = trsCache[ i ];
               target = oObjects[ i ];
               posX = posY = posZ = index = 0;

               // positions[ index++ ] = posX;
               // positions[ index++ ] = posY;
               // positions[ index++ ] = posZ;   

               currentMesh.setQuaternionAt( i , target.quaternion.setFromEuler( target.rotation) );
               currentMesh.setScaleAt( i , target.scale );

               new TWEEN.Tween( object.position )
                        .to({ x: target.position.x, y: target.position.y, z: target.position.z }, 3000 )
                            .onUpdate( function () {

                                positions[ index++ ] = this._valuesEnd.x;
                                positions[ index++ ] = this._valuesEnd.y;
                                positions[ index++ ] = this._valuesEnd.z;

                                currentMesh.geometry.attributes.position.needsUpdate = true;
                         
               }).start();                  

         }  
                    
         currentMesh.needsUpdate( 'quaternion' );
         currentMesh.needsUpdate( 'position' );
         currentMesh.needsUpdate( 'scale' );

         new TWEEN.Tween( this )
                 .to( {}, duration )
                 .onUpdate( render )
                 .start();

     }
2

Thanks for all the fish!!

3

@D13 You’re welcome :slight_smile: I’m still thinking what is that “InstancedMesh” example? :thinking:
I’m still on vacation though. Is there any chance to see the result? :angel:

4

Example was updated with correct Text code. @prisoner849 I got you mixed up with PailHead on the InstancedMesh. Sorry about that. I still learn a lot from your posts of course, but, I realize that you and he are different people now. Sorry Dan if you ever see this!

5

I didn’t get what you want to achieve with instanced letters, but just in case I’ve made an example with Latin alphabet. There are 26 instanced meshes of 100 instances each:

изображение
изображение755×409 51.1 KB

4 Likes
6

Thanks for the help!

1 Like
8

I rewrote this again. No duplicate wrappers are needed. After picking the instancedMesh apart now I have a very reduced version that just uses multiple caches. I’m now working on a new version of InstancedMesh that allows one to create the instances from multiple geometries. So far so good. Ill post back a simplified version of this. I sent PailHead some Pizza money. :slight_smile:

BufferRendering array in Three.js gave me some clues as to how to get multiple geometries and build their vertexes into an instancedGeometry. The arrays seem to get pretty big but not such a big deal as long as all the geometries use the same materials.

 new InstancedMeshes( geometry, currentCount, maxCount...`

     for( ... < maxCount; i++ ) {

            geometry [ i ],
            i,