無法將動畫附加到網格上？

Question

我是three.js中的新手，我有一個將動畫附加到網格的問題。 我想爲此使用JSONLoader。我使用這個Maya插件創建了js文件 - https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter/utils/exporters/maya。

我已經加載了網格和紋理。我找到了展示骨架的方式，當動畫播放時，我可以看到只有骨架在移動。網格是靜態的！

我會感謝任何幫助！

這是我的腳本：

if (! Detector.webgl) Detector.addGetWebGLMessage(); 

     var container, stats; 
     var camera, scene, renderer, objects, mesh; 
     var clock; 

     // instantiate a loader 
     var imageLoader = new THREE.ImageLoader(); 



     var loader = new THREE.JSONLoader(); 
     loader.load('elephant2.js', function (geometry, materials) { 

      geometry.computeVertexNormals(); 
      geometry.computeBoundingBox(); 
      ensureLoop(geometry.animation); 

      var material1 = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture("textures/CH_NPC_MOB_Elephant_A01_D_GRN.jpg")}); 
      var material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/CH_NPC_MOB_Elephant_A01_N_GRN.jpg') }); 
      var material3 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('textures/CH_NPC_MOB_Elephant_A01_SP_GRN.jpg') }); 

      var materials = [material1, material2, material3]; 
      var meshFaceMaterial = new THREE.MeshFaceMaterial(materials); 

      var mesh = new THREE.SkinnedMesh(geometry, meshFaceMaterial); 
      mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.015 
      mesh.updateMatrix(); 

      var animation = new THREE.Animation(mesh, geometry.animation); 
      animation.play(); 

      init(mesh); 
      animate(); 

     }); 



     function ensureLoop(animation) { 

      for (var i = 0; i < animation.hierarchy.length; i ++) { 

       var bone = animation.hierarchy[ i ]; 

       var first = bone.keys[ 0 ]; 
       var last = bone.keys[ bone.keys.length - 1 ]; 

       last.pos = first.pos; 
       last.rot = first.rot; 
       last.scl = first.scl; 

      } 

     } 

     function init(mesh) { 


      container = document.createElement('div'); 
      document.body.appendChild(container); 

      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.set(2, 2, 3); 

      scene = new THREE.Scene(); 

      // Grid 

      var size = 14, step = 1; 

      var geometry = new THREE.Geometry(); 
      var material = new THREE.LineBasicMaterial({ color: 0x303030 }); 

      for (var i = - size; i <= size; i += step) { 

       geometry.vertices.push(new THREE.Vector3(- size, - 0.04, i)); 
       geometry.vertices.push(new THREE.Vector3( size, - 0.04, i)); 

       geometry.vertices.push(new THREE.Vector3(i, - 0.04, - size)); 
       geometry.vertices.push(new THREE.Vector3(i, - 0.04, size)); 

      } 

      var line = new THREE.Line(geometry, material, THREE.LinePieces); 
      scene.add(line); 

      // Add the COLLADA 

      scene.add(mesh); 

      particleLight = new THREE.Mesh(new THREE.SphereGeometry(4, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffffff })); 
      scene.add(particleLight); 

      // Lights 

      scene.add(new THREE.AmbientLight(0xcccccc)); 

      var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee); 
      directionalLight.position.x = Math.random() - 0.5; 
      directionalLight.position.y = Math.random() - 0.5; 
      directionalLight.position.z = Math.random() - 0.5; 
      directionalLight.position.normalize(); 
      scene.add(directionalLight); 

      var pointLight = new THREE.PointLight(0xffffff, 4); 
      //particleLight.add(pointLight); 

      renderer = new THREE.WebGLRenderer(); 
      //renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

      stats = new Stats(); 
      stats.domElement.style.position = 'absolute'; 
      stats.domElement.style.top = '0px'; 
      container.appendChild(stats.domElement); 

      helper = new THREE.SkeletonHelper(mesh); 
      helper.material.linewidth = 3; 
      helper.visible = true; 
      scene.add(helper); 


      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 


     function animate() { 

      requestAnimationFrame(animate); 

      render(); 
      stats.update(); 

     } 

     var clock = new THREE.Clock(); 

     function render() { 
      var delta = 0.75 * clock.getDelta(); 
      var timer = Date.now() * 0.0005; 

      camera.position.x = Math.cos(timer) * 10; 
      camera.position.y = 2; 
      camera.position.z = Math.sin(timer) * 10; 



      camera.lookAt(scene.position); 

      particleLight.position.x = Math.sin(timer * 4) * 3009; 
      particleLight.position.y = Math.cos(timer * 5) * 4000; 
      particleLight.position.z = Math.cos(timer * 4) * 3009; 
      THREE.AnimationHandler.update(delta); 
      if (helper !== undefined) helper.update(); 

      renderer.render(scene, camera); 

     } 

Answer 1

我發現這個問題。每個material.material.skinning都需要設置爲true。