從攪拌機到THREE.js：緩衝區幾何和出口商的動畫問題

我正在使用THREE.js一段時間，現在我真的很享受它，除了一件事：從Blender帶來的動畫圖形到遊戲場景。在試圖自己解決並尋找一段時間後，我在這裏問我的問題。說穿了，我只是一個編碼器，而不是一個圖形專家，我不是自己創建攪拌器的內容。從攪拌機到THREE.js：緩衝區幾何和出口商的動畫問題

1.在當前版本86中使用THREE.js Blender導出器導出BufferGeometry時是否有什麼特別的知道（或破壞？）？當使用BufferGeometry作爲導出選項時，我的文件大小增長了3倍，但沒有動畫包含在生成的.json文件中。除了「幾何」而不是「緩衝區幾何」之外，使用相同的選項包括動畫並給出較小的文件大小（下面的出口選項和示例文件）。

2.什麼可能是一個正確的問題？ .json不在THREE.js中播放動畫？我有一個可以導出，加載和動畫的工作示例（Slimeblob）。使用相同的代碼，我的大多數其他動畫模型都會加載，但不是動畫。例如，我有一個非常簡單的多維數據集，其中包含一個不會在THREE.js中播放的短動畫，而是在.json（以及運行時環境）中的動畫數據。 .blend文件和下面的代碼。在控制檯輸出中可以看到動畫以某種方式加載（至少在Chrome瀏覽器中）。

實施例演示：

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Animation Test</title> 
    <style> body { padding: 0; margin: 0; overflow: hidden; } </style> 
</head> 
<body> 

<script src="three.js"></script> 
<script src="OrbitControls.js"></script> 
<script> 

var gameScene, gameCamera, renderer; 
var clock = new THREE.Clock(); 
var delta; 
var controls; 

var jsonLoader = new THREE.JSONLoader(); 

var SlimeblobGeometry, SlimeblobGeometryAnimationMixer; 
var AnimationExport, AnimationExportAnimationMixer; 

init(); 

function init() { 
    var windowHeight = window.innerHeight; 
    var windowWidth = window.innerWidth; 

    gameCamera = new THREE.PerspectiveCamera(60, windowWidth/windowHeight, 1, 2100); 
    gameCamera.position.set(0, 11, 11); 
    gameCamera.lookAt(new THREE.Vector3(0, 0, 0)); 

    gameScene = new THREE.Scene(); 

    renderer = new THREE.WebGLRenderer({ antialias: true }); 
    renderer.setSize(windowWidth, windowHeight); 
    renderer.setClearColor(0xB2DFEE); 
    document.body.appendChild(renderer.domElement); 

    var light = new THREE.HemisphereLight(0xffffff, 0x003300, 1); 
    light.position.set(-80, 500, 50); 
    gameScene.add(light); 

    controls = new THREE.OrbitControls(gameCamera, renderer.domElement); 

    jsonLoader.load("SlimeblobGeometry.json", 
        function (geometry, materials) { 
         for (var k in materials) { 
          materials[ k ].skinning = true; 
         } 
         SlimeblobGeometry = new THREE.SkinnedMesh(geometry, materials); 
         SlimeblobGeometry.position.x = 5; 
         gameScene.add(SlimeblobGeometry); 
         SlimeblobGeometryAnimationMixer = new THREE.AnimationMixer(SlimeblobGeometry); 
         SlimeblobGeometryAnimationMixer.clipAction(SlimeblobGeometry.geometry.animations[ 0 ]).play(); 
        } 
    ); 

    jsonLoader.load("AnimationExport.json", 
        function (geometry) { 
         AnimationExport = new THREE.SkinnedMesh(geometry, new THREE.MeshLambertMaterial({ color: 0x436EEE })); 
         AnimationExport.position.x = -5; 
         gameScene.add(AnimationExport); 
         AnimationExportAnimationMixer = new THREE.AnimationMixer(AnimationExport); 
         AnimationExportAnimationMixer.clipAction(AnimationExport.geometry.animations[ 0 ]).play(); 
         console.log(AnimationExport.geometry.animations[ 0 ]); /* Chrome Browser may be necessary for meaningful output */ 
        } 
    ); 

    updateFrame(); 
} 

function updateFrame() { 
    requestAnimationFrame(updateFrame); 
    delta = clock.getDelta(); 

    if (SlimeblobGeometryAnimationMixer) { 
     SlimeblobGeometryAnimationMixer.update(delta); 
    } 
    if (AnimationExportAnimationMixer) { 
     AnimationExportAnimationMixer.update(delta); 
    } 

    controls.update(); 

    renderer.render(gameScene, gameCamera); 
} 

</script> 

</body> 
</html>

代碼運行沒有錯誤和兩種模型被加載。粘液是正確的動畫，立方體不是。我錯過了什麼？

The export settings (same for both)

環境細節：

three.js所修訂86（UP-2-日期在這個時候）
three.js所攪拌機出口商從修訂86
攪拌機版2.77

工作示例：上面的代碼和.json's和.blend's（直接工作在本地除了跨域策略塊）：

AnimationTest.7z

所以，遠離我現在，感謝和最誠摯的問候！

來源

2017-07-16 Yahku

分配skinning: true你的立方體材料，即解決了這個問題對我來說：

AnimationExport = new THREE.SkinnedMesh(geometry, new THREE.MeshLambertMaterial({ color: 0x436EEE, skinning: true }));

SkinnedMesh動畫和threejs是對付痛苦，但有一些愛最近。這也意味着動畫系統API不時發生變化，所以我建議通過github上的問題和PRs來閱讀:-)

來源

2017-07-17 09:45:30

是的，那就是它，你解決了我的問題，非常感謝！沒有想法告訴我的代碼創建的材料關於動畫。我會稍微等一下，然後接受你的anser，以便有人可以回答BufferGeometry的困惑。 – Yahku

從攪拌機到THREE.js：緩衝區幾何和出口商的動畫問題

回答

相關問題