Three.js網格不AnimationHandler動畫

我一直無法讓我的攪拌機導出網格動畫。即使是在這個例子中我可以清楚地看到動畫的水牛。（我一直試圖重現沒有用這是代碼，我懷疑這是一個非常簡單的缺失的事情，但我不知道，我懷疑這是一個攪拌機的問題，因爲我甚至沒有能夠動畫包括網格Three.js網格不AnimationHandler動畫

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>three.js webgl - blender</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
    <style> 
     body { 
      font-family: Monospace; 
      background-color: #000000; 
      margin: 0px; 
      overflow: hidden; 
     } 

     #info { 
      color: #fff; 
      position: absolute; 
      top: 10px; 
      width: 100%; 
      text-align: center; 
      z-index: 100; 
      display:block; 

     } 

     a { color: red } 

     #stats { position: absolute; top:0; left: 0 } 
     #stats #fps { background: transparent !important } 
     #stats #fps #fpsText { color: #aaa !important } 
     #stats #fps #fpsGraph { display: none } 
    </style> 
</head> 

<body> 
    <div id="info"> 
     <a href="http://crenet-games.com">025 Valgany</a> 
    </div> 

    <script src="/js/three.min.js"></script> 
    <script src="/js/Detector.js"></script> 
    <script src="/js/libs/stats.min.js"></script> 

    <script> 
     if (! Detector.webgl) Detector.addGetWebGLMessage(); 
     var modelBB={"min":new THREE.Vector3(),"max":new THREE.Vector3() }; 
     var crewon, animation; 
     var container, stats; 
     var camera, scene, renderer, objects; 
     var particleLight, pointLight; 
     var skin; 
     var clock = new THREE.Clock(); 
     init(); 
     function init() { 
      container = document.createElement('div'); 
      document.body.appendChild(container); 
      camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 10000); 
      camera.position.set(2, 4, 5); 
      scene = new THREE.Scene(); 
      scene.fog = new THREE.FogExp2(0x00FF00, 0.035); 
      var loader = new THREE.JSONLoader(true); 
      loader.load("buffalo.js", function(geometry, materials) { 
       geometry.computeBoundingBox(); 
       var faceMaterial = new THREE.MeshFaceMaterial(materials); 
       faceMaterial.skinning = true; 
       THREE.AnimationHandler.add(geometry.animation); 
       crewon = new THREE.SkinnedMesh(geometry,faceMaterial, false); 
       modelBB=geometry.boundingBox; 
       crewon.position.set(0,0,0); 
       scene.add(crewon); 
       renderer.render(scene, camera); 
       animation = new THREE.Animation(crewon, geometry.animation.name); 
       animation.play(true, 0.5); 
      }); 
      // Lights 
      scene.add(new THREE.AmbientLight(0xcccccc)); 
      pointLight = new THREE.PointLight(0xffffff, 1, 30); 
      pointLight.position.set(5, 0, 0); 
      scene.add(pointLight); 
      // Renderer 
      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 
      // Stats 
      stats = new Stats(); 
      container.appendChild(stats.domElement); 
      // Events 
      window.addEventListener('resize', onWindowResize, false); 
      animate(); 
     } 
     function onWindowResize(event) { 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 
     } 
     function animate() { 
      requestAnimationFrame(animate, renderer.domElement); 
      var delta = clock.getDelta(); 
      THREE.AnimationHandler.update(delta); 
      render(); 
      stats.update(); 
     } 

     function render() { 
      if (crewon){ 
       crewon.rotation.y+=0.01; 
      } 
      if(typeof animation != 'undefined' && animation!=null){ 
       animation.update(0.1); 
      } 
      if(typeof modelBB != 'undefined' && modelBB!=null){ 
       camera.position.x = 0; 
       camera.position.y = (modelBB.max.y-modelBB.min.y)/2; 
       camera.position.z = (modelBB.max.z-modelBB.min.z)*2; 
       camera.lookAt(new THREE.Vector3(
        0, 
        (modelBB.max.y-modelBB.min.y)/2, 
        0)); 
      } 
      renderer.render(scene, camera); 
     } 
    </script> 
</body> 
</html>

來源

2013-03-01 efaj

該問題可能是在這裏：

var faceMaterial = new THREE.MeshFaceMaterial(materials); 
faceMaterial.skinning = true;

的meshFaceMaterial就像其他材料的容器 - 它本身並不是真正的材料。嘗試遍歷其收藏的材料：

var materials = faceMaterial.materials; 
for (var i = 0,length = materials.length; i < length; i++) { 
    var material = materials[i]; 
    material.skinning = true; 
}

來源

2013-03-03 20:56:45 spectre

這是「工作」！我的模型仍然有一些問題，但示例野牛正在工作，所以這個問題解決了，你贏得了所有的獎項。 – efaj 2013-03-04 01:20:24

嘗試閱讀這篇文章，也許它會幫助： http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

來源

2013-03-02 20:41:29 spectre

我曾在之前一看，我並沒有跟隨它，因爲我甚至能夠得到野牛動畫，這暗示了另一種類型的錯誤。 – efaj 2013-03-03 01:46:17

+1，因爲來自已接受答案的其他問題已通過此問題得到解決 – efaj 2013-03-04 09:13:44

您是否可以編輯此答案以包含鏈接網站最相關/有用的部分？通常，外部頁面消失，然後回答那裏的鏈接變得毫無用處。 – Pops 2013-09-18 15:53:31

Three.js網格不AnimationHandler動畫

回答

相關問題