Loading JSON Animating Model using tQuery [Three.js]

Question

I am learning to load a JSON format and manipulate it using tQuery. I did successfully load the animating model, but it did not load the textures, as it loads the pitch-black model animating in screen. The model is perfectly fine, as it is the example model used in Three.js, named stork.js.

This is my code.

<script>
  var world=tQuery.createWorld().boilerplate().start();
  world.removeCameraControls();
  // Animation Variables
  var animOffset = 0, // starting frame of animation
  duration = 1000, // milliseconds to complete animation
  keyframes = 12, // total number of animation frames = SEE THE FILE OF MODEL!
  interpolation = duration / keyframes, // milliseconds per frame
  lastKeyframe = 0, // previous keyframe
  currentKeyframe = 0,
  bird,bird_material;
  var jsonLoader = new THREE.JSONLoader();
  jsonLoader.load("models/stork.js",
    function(geometry, materials){
    if(geometry.morphColors && geometry.morphColors.length) {
      var colorMap = geometry.morphColors[0];
      for (var i = 0; i < colorMap.colors.length; i ++) {
        geometry.faces[i].color = colorMap.colors[i];
        geometry.faces[i].color.offsetHSL( 0, 0.3, 0 );
      }
    }
    geometry.computeMorphNormals();
    addModelToScene(geometry, materials);
  });
  function addModelToScene(geometry, materials){
    for (var i = 0; i < materials.length; i++) {
      materials[i].morphTargets = true;
    }
    bird_material = new THREE.MeshPhongMaterial({
      color: 0xffffff, morphTargets: true, morphNormals: true,
      vertexColors: THREE.FaceColors, shading: THREE.SmoothShading 
    });
    bird = new THREE.Mesh( geometry,bird_material );
    bird.scale.set(0.02,0.02,0.02);
    bird.position.set(0,0,0);
    bird.rotation.set(0,3.9,0);
    bird.castShadow  = true;
    var object3DNew = new tQuery.Object3D();
    object3DNew.add(bird).addTo(world);
  }
  world.hook(function(){
    if(bird){
      var time = new Date().getTime() % duration;
      var keyframe = Math.floor(time / interpolation) + animOffset;
      if (keyframe != currentKeyframe){
        bird.morphTargetInfluences[lastKeyframe] = 0;
        bird.morphTargetInfluences[currentKeyframe] = 1;
        bird.morphTargetInfluences[keyframe] = 0;
        lastKeyframe = currentKeyframe;
        currentKeyframe = keyframe;
      }
      bird.morphTargetInfluences[keyframe] = (time % interpolation) / interpolation;
      bird.morphTargetInfluences[lastKeyframe] = 1 - bird.morphTargetInfluences[keyframe];
    }
  });
</script>

This is the result I get:

error showing image

enter image description here

monk monk · Accepted Answer · 2013-06-02T16:29:34

It was really stupid of me, Thankyou Jerome Etienne for the answer. The answer is, add the light to the scene.

Loading JSON Animating Model using tQuery [Three.js]

1 Answers