使用tQuery加载JSON动画模型[Three.js]

时间:2013-06-02 10:43:13

标签: javascript three.js webgl

我正在学习加载JSON格式并使用tQuery对其进行操作。我确实成功加载了动画模型,但它没有加载纹理,因为它加载了在屏幕上制作动画的黑色模型。该模型非常精细,因为它是Three.js中使用的示例模型,名为stork.js。

这是我的代码。

<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>

这是我得到的结果:

error showing image

enter image description here

1 个答案:

答案 0 :(得分:0)

我真的很蠢,谢谢Jerome Etienne的回答。答案是,将灯光添加到场景中。