1

I am really new to Three JS and Tween JS. I picked it up for my project and have been frustrated lately. I've been having trouble trying to tween object1. There are other objects in the scene as well. object2, obeject3, etc. I am not sure if I should add numbers to mtlLoaders and objLoaders as well.

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()
};

Here is my tween. I don't want the tween to start right away as I want it to start when a button is hit.

var test = new TWEEN.Tween(object1.position).to({ x: 1, y: 0, z: 0 }, 2000);
    test.easing(TWEEN.Easing.Quartic.InOut);

The tween seems to work when I put it after the scene.add( object1 ) and start it right away but I want it to start when a button is clicked. Any help is appreciated.

baikho
  • 5,203
  • 4
  • 40
  • 47
Albert Pio de Roda
  • 13
  • 2
  • if you `console.log(document.getElementById("engage"))` is it undefined? If so you need to wrap the click function in the `window.onload` event – Ronnie Nov 29 '16 at 21:50

1 Answers1

0

object1 is a local variable inside the scope of onLoad callback function. See this SO answer. And also I would add an event listener to a button in the the way like:

document.getElementById("engage").addEventListener("click", engage, false);

function engage() {
    test.start();
};
Community
  • 1
  • 1
prisoner849
  • 16,894
  • 4
  • 34
  • 68