De Blender à Three.js: BufferGeometry et problèmes d'animation avec l'exportateur

je travaille avec Three.js pendant un certain temps maintenant et je suis vraiment ça, sauf pour une chose: mettre des graphiques animés de Blender sur la scène du jeu. Après avoir essayé de le résoudre par moi-même et de chercher un moment, je pose mes questions ici. Pour parler franchement, je ne suis qu'un codeur, pas un expert en graphisme et je ne crée pas moi-même le contenu de Blender.De Blender à Three.js: BufferGeometry et problèmes d'animation avec l'exportateur

1. Y at-il quelque chose de spécial à savoir (ou à rompre?) Lors de l'exportation de BufferGeometry avec l'exportateur THREE.js Blender dans la version actuelle 86? Lorsque vous utilisez BufferGeometry comme option d'exportation, ma taille de fichier augmente par le facteur 3, mais aucune animation n'est incluse dans le fichier .json résultant. Utiliser les mêmes options sauf "Géométrie" au lieu de "BufferGeometry" inclut les animations et donne une taille de fichier plus petite (options d'exportateur et exemples de fichiers ci-dessous).

2. Quel pourrait être le problème avec un bon? .json ne joue pas l'animation dans THREE.js? J'ai un exemple de travail (le Slimeblob) qui peut être exporté, chargé et animé. En utilisant le même code, la plupart de mes autres modèles animés sont chargés, mais pas animés. Par exemple, j'ai un cube très simple avec une animation courte qui n'est pas jouée dans THREE.js mais avec des données d'animation dans le .json (ainsi que dans l'environnement d'exécution). Fichiers .blend et code ci-dessous. Que l'animation est en quelque sorte chargée peut être vu dans la sortie de la console (au moins dans le navigateur chrome).

Exemple Démonstration:

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

Le code fonctionne sans erreurs et les deux modèles sont chargés. Le slime est animé correctement, le cube ne l'est pas. Qu'est-ce que je rate?

The export settings (same for both)

Environnement Détails:

Three.js Révision 86 (jusqu'à 2 jour à ce moment)
Three.js Blender Exportateur de révision 86
Version Blender 2.77

Exemple de travail: le code ci-dessus et le .json et .blend (travaillant directement sur place, sauf pour les blocs inter-origine-politique):

AnimationTest.7z

Loin de moi maintenant, merci et meilleures salutations!

Source

2017-07-16 Yahku

Assigner skinning: true à votre matériel de cubes, qui a résolu le problème pour moi:

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

SkinnedMesh Animations et threejs étaient une douleur à traiter, mais nous avons eu un peu d'amour ces derniers temps. Cela signifie également l'API du système d'animation est en train de changer de temps en temps donc je recommande de lire à travers les questions et sur github :-) PRs

Source

2017-07-17 09:45:30

Oui, thats it, vous avez résolu mon problème, merci beaucoup pour ça! Je n'ai pas eu l'idée de raconter mes matériaux créés par code à propos de l'animation. Je vais attendre un peu et ensuite accepter votre réponse comme correcte afin que peut-être quelqu'un peut répondre à la confusion BufferGeometry, aussi. – Yahku

De Blender à Three.js: BufferGeometry et problèmes d'animation avec l'exportateur

Répondre

Questions connexes