how to clone a GLTF model like in Javascript

[RobertRoeb]

Hi there,
in Three.js I need to traverse a complete GLTF model to clone it correctly and the Three.js group has kindly provided a method to do that which paste down there. Is that required in ThreeJS dart as well and - assuming the answer is yes - could someone help me convert that code to Dart.

function parallelTraverse( a, b, callback )
{
callback( a, b );
for ( var i = 0; i < a.children.length; i ++ ) {
parallelTraverse( a.children[ i ], b.children[ i ], callback );
}
}
function cloneGTLF( source )
{
var sourceLookup = new Map();
var cloneLookup = new Map();
var clone = source.clone();
parallelTraverse( source, clone, function ( sourceNode, clonedNode ) {
sourceLookup.set( clonedNode, sourceNode );
cloneLookup.set( sourceNode, clonedNode );
} );
clone.traverse( function ( node ) {
if ( ! node.isSkinnedMesh ) return;
var clonedMesh = node;
var sourceMesh = sourceLookup.get( node );
var sourceBones = sourceMesh.skeleton.bones;
clonedMesh.skeleton = sourceMesh.skeleton.clone();
clonedMesh.bindMatrix.copy( sourceMesh.bindMatrix );
clonedMesh.skeleton.bones = sourceBones.map( function ( bone ) {
return cloneLookup.get( bone );
} );
clonedMesh.bind( clonedMesh.skeleton, clonedMesh.bindMatrix );
} );
return clone;
}

[RobertRoeb]

Here is my own first attempt. I will test it on some complex models.

void parallelTraverse( Object3D a, Object3D b, void Function( Object3D a, Object3D b) callback)
{
callback( a, b );
for ( int i = 0; i < a.children.length; i ++ ) {
parallelTraverse( a.children[ i ], b.children[ i ], callback );
}
}
Object3D cloneGLTF( GLTFData source )
{
final clone = source.scene.clone();
final Map<Object3D,Object3D> sourceLookup = {};
final Map<Object3D,Object3D> cloneLookup = {};
parallelTraverse(source.scene, clone, (sourceNode,clonedNode) {
sourceLookup[clonedNode] = sourceNode;
cloneLookup[sourceNode] = clonedNode;
} );
clone.traverse( ( node )
{
if (node is three.SkinnedMesh )
{
final clonedMesh = node;
final sourceMesh = sourceLookup[ node ];
final sourceBones = sourceMesh!.skeleton!.bones;
clonedMesh.skeleton = sourceMesh.skeleton!.clone();
clonedMesh.bindMatrix = sourceMesh.bindMatrix!.clone();
clonedMesh.skeleton!.bones = sourceBones.map( ( bone ) {
return cloneLookup[ bone ] as three.Bone;
} ).toList();
clonedMesh.bind( clonedMesh.skeleton!, clonedMesh.bindMatrix );
}
} );
return clone;
}

[Knightro63]

Hi @RobertRoeb,

I won't be able to look at it until Tuesday or Wednesday. But I will take a look and give you some code then.

[Knightro63]

Hi @RobertRoeb,

I took a look at your code and made some changes. I think it would work fine, but just in case.

void parallelTraverse(three.Object3D a, three.Object3D b, void Function(three.Object3D a, three.Object3D b) callback) {
  callback(a, b);
  for (int i = 0; i < a.children.length; i++) {
    // Check bounds just in case
    if (i < b.children.length) {
      parallelTraverse(a.children[i], b.children[i], callback);
    }
  }
}

three.Object3D cloneGLTF(three.Object3D source) {
  final clone = source.clone(true); // Use .clone(true) to clone children
  
  final Map<three.Object3D, three.Object3D> sourceLookup = {};
  final Map<three.Object3D, three.Object3D> cloneLookup = {};

  //This might not be needed if you use .clone(true)
  parallelTraverse(source, clone, (sourceNode, clonedNode) {
    sourceLookup[clonedNode] = sourceNode;
    cloneLookup[sourceNode] = clonedNode;
  });

  clone.traverse((node) {
    if (node is three.SkinnedMesh) {
      final clonedMesh = node;
      final sourceMesh = sourceLookup[node] as three.SkinnedMesh?;

      if (sourceMesh != null && sourceMesh.skeleton != null) {
        final sourceBones = sourceMesh.skeleton?.bones;
        
        clonedMesh.skeleton = sourceMesh.skeleton?.clone();
        clonedMesh.bindMatrix = sourceMesh.bindMatrix?.clone();

        if(sourceBones != null){
          clonedMesh.skeleton?.bones = sourceBones.map((bone) {
            return cloneLookup[bone] as three.Bone;
          }).toList();
        }

        if(clonedMesh.skeleton != null) clonedMesh.bind(clonedMesh.skeleton!, clonedMesh.bindMatrix);
      }
    }
  });

  return clone;
}