I'm a beginner in the world of Three JS and Tween JS, having recently picked it up for my project. However, I've encountered some frustration along the way. My main issue at the moment is trying to tween object1, amidst other objects like object2 and object3 in the scene. Should numbers be added to mtlLoaders and objLoaders as well? That's where I'm currently stuck.
var mtlLoader = new THREE.MTLLoader( );
mtlLoader.transparency = true;
mtlLoader.setBaseUrl( 'assets/' )
mtlLoader.setPath( 'assets/' );
mtlLoader.load( 'exterior.mtl', function ( materials )
{
materials.side = THREE.DoubleSide;
materials.preload();
materials.opacity = 0
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'assets/' );
objLoader.load( 'exterior.obj', function ( object1 )
{
object1.position.y = .01
object1.position.z = -8
object1.scale.set( .04, .04, .04 );
object1.castShadow = true;
object1.receiveShadow = true;
scene.add( object1 );
}, onProgress, onError );
});
document.getElementById("engage").onclick = function engage()
{
test.start()
};
My current challenge lies with implementing a tween that doesn't start right away, but rather when a button is clicked. Here is the tween code snippet:
var test = new TWEEN.Tween(object1.position).to({ x: 1, y: 0, z: 0 }, 2000);
test.easing(TWEEN.Easing.Quartic.InOut);
While the tween works fine when placed after scene.add( object1 ) and started immediately, I actually want it to begin upon clicking a button. Any advice or guidance on this matter would be greatly appreciated.