threejs animation

animated balloons in three js

by Olivier

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r81/three.js"></script>
<body onload="render();">
<!-- 
    path to the loaded JSON FILE 
      https://rawgit.com/bakajin/2e3d2f6a722103ed4aefd76f6250ec08/raw/28cad35c20060d478499c0cd40a2753611993720/oomp-scene_balloons-oomp-6.9.4.json 
      
 -->

<div id="view"><a href="#" onclick="playScene('fly');">Click to play animation</a>
<a href="#" onclick="srt();">#</a>
</div>
</body>

CSS

#view {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ff0000
}

body {
  
}

JavaScript

var fgScene, camera, fgRenderer, foregroundView;

//set up manager
var manager = new THREE.LoadingManager();
var clock  = new THREE.Clock();

// array containing animation clips
var animLib = new Array();
//array containing transformation/srt mixers
var srtMixers = new Object();

function makeBalloon(name, object) {
  //object contains the model of the balloon
  var animatedBalloon = object.getObjectByName("scene:helium_balloon_model:helium_balloon_model").clone();
  // set name
  animatedBalloon.name = name;
  animatedBalloon.scale = new THREE.Vector3(1,1,1);
	animatedBalloon.updateMatrix();
	animatedBalloon.updateMatrixWorld(true);		
  
  srtMixers[name] = new THREE.AnimationMixer(animatedBalloon);
	srtMixers[name].addEventListener('loop', animationHandler);
 
return animatedBalloon;
}

/* insert the clips from the animation lib into respective mixers and call .play() */
function playScene(scene) {
	console.log(animLib);
  for (parentName in srtMixers) {
    var clpName = "balloon5_loop"; //parentName + "_" + scene;
    var clp = THREE.AnimationClip.findByName(animLib, clpName);
    var action = srtMixers[parentName].clipAction(clp);
    action.clampWhenFinished = true;
    console.log("playScene:", clpName, clp, parentName, srtMixers);
    action.play();
  }
}

function animate() {
  //animate stuff
    requestAnimationFrame(animate);

  var delta = clock.getDelta();
  var theta = clock.getElapsedTime();

 for (mixer in srtMixers) {
    srtMixers[mixer].update(delta);
 	//	console.log("mixersObj", mixer, srtMixers[mixer]);
 }
  fgRenderer.render(fgScene, camera); //foregroundCam
}

function animationHandler(event) {
  console.log("animationHandler: rootObject", event.target._root);
  console.log("animationHandler: event", event);
}

function render() {
  init();
  animate();
}

function init() {
  foregroundView = document.getElementById('view');
  fgRenderer = new THREE.WebGLRenderer({alpha: true,antialias: true});
  fgRenderer.setSize(window.innerWidth,...