Animate multiple models

how can I apply basic animation(rotate) for two or more models,

already add models like this, now I want to animate those separately,

var mesh = null;

var mtlLoader = new THREE.MTLLoader();

mtlLoader.setPath( "obj/cup/" );

mtlLoader.load( 'cup4.mtl', function( materials ) {

  materials.preload();

  var objLoader = new THREE.OBJLoader();

  objLoader.setMaterials( materials );

  objLoader.setPath( "obj/cup/" );

  objLoader.load( 'cup4.obj', function ( cup ) {

    mesh = cup;

    mesh.position.z = 245;

    mesh.position.y = -1;

    

    scene.add( mesh );

  } );

} );

var mesh = null;

var mtlLoader = new THREE.MTLLoader();

mtlLoader.setPath( "obj/box2/" );

mtlLoader.load( 'box-01.mtl', function( materials ) {

  materials.preload();

  var objLoader = new THREE.OBJLoader();

  objLoader.setMaterials( materials );

  objLoader.setPath( "obj/box2/" );

  objLoader.load( 'box-01.obj', function ( box01 ) {

    mesh = box01;

    mesh.position.z = 236;

    mesh.position.y = 1;

    mesh.position.x = 4;

    

    scene.add( mesh );

  } );

} );

Instead of declaring mesh, introduce two new variables mesh1 and mesh2 in order to save the references to your loaded OBJ meshes. You can then add the following code in your render function.

if ( mesh1 ) mesh1.rotation.x += 0.01;
if ( mesh2 ) mesh2.rotation.y += 0.01;
1 Like

thanks sir