Three.js - Анимация не отображается в браузере

Я пытаюсь отобразить анимацию в браузере, используя three.js, и вот результат: avatar_jsffidle. Аватара отображается, но анимации нет. Может кто-то мне помочь, пожалуйста? Ниже приведен полный код:Three.js - Анимация не отображается в браузере

<html> 
    <head> 
     <title>My first Three.js app</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100% } 
     </style> 
    </head> 
    <body> 
    <script src="models/three.js"></script> 

    <script> 

    var camera, light, renderer, objeto, animation, helpset, clock; 

    var loader; 

    function init() { 

      scene = new THREE.Scene(); 
      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

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

      light = new THREE.DirectionalLight(0xdfebff, 1.75); 
      light.position.set(50, 200, 100); 
      light.position.multiplyScalar(1.3); 

      light.castShadow = true; 
      //light.shadowCameraVisible = true; 

      light.shadowMapWidth = 1024; 
      light.shadowMapHeight = 1024; 

      var d = 300; 

      light.shadowCameraLeft = -d; 
      light.shadowCameraRight = d; 
      light.shadowCameraTop = d; 
      light.shadowCameraBottom = -d; 

      light.shadowCameraFar = 1000; 
      light.shadowDarkness = 0.5; 

      scene.add(light); 


      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 


      camera.position.z = 5; 

      clock = new THREE.Clock(); 

      loader = new THREE.JSONLoader(); 
      loader.load('models/SL-MD-avatar_erica78.json', addModel); 

      function addModel(geometry, materials){ 

        materials[0].skinning = true; 
        materials[0].color = "0xb091cc"; 

        var m = new THREE.MeshLambertMaterial(materials); 

        console.log(materials[0]); 
        objeto= new THREE.SkinnedMesh(geometry, m); 
        scene.add(objeto); 

        objeto.castShadow = true; 
        objeto.receiveShadow = true; 

        scene.add(objeto); 
        helpset = new THREE.SkeletonHelper(objeto); 
        //scene.add(helpset); 

        animation = new THREE.Animation(objeto, geometry.animations[0]); 
        animation.play(); 


      } 
     } 

     function render() { 

      delta = 0.75 * clock.getDelta(); 

      scene.traverse(function(child) { 
       if (child instanceof THREE.SkinnedMesh){ 

        child.rotation.y += .01; 
       } 
      }); 

      THREE.AnimationHandler.update(delta); 
     } 

     function animate(){ 
      requestAnimationFrame(animate); 
      render(); 
      renderer.render(scene, camera); 
     } 

     init(); 
     animate(); 


     </script> 
    </body> 
</html>

источник

2015-07-09 Erica Okamura

ваша скрипка была с помощью R54. [Updated] (https://jsfiddle.net/Atrahasis/v6qd358n/13/). консоль сообщает, что в json есть проблема, посмотрите на нее. Я не могу отступать и смотреть это за строкой. вы его отредактировали? – Atrahasis

Я отредактировал свое оригинальное сообщение с обновленной ссылкой на jsffidle. Я поместил JSON-файл в отступы (во внешних ресурсах есть еще одна ссылка с тем же именем). Итак, можете ли вы открыть его, скопировать и вставить в .json-файл и загрузить его на сервер, как и с файлом three.js? –

В JSON файл массивы skinIndices и skinWeights содержат только значения 0. Это означает, что вы создали кости, но не назначили им вершины. В Blender вы также должны видеть только кости, а не тело.

Вот тест, чтобы вы могли видеть, что нет никаких проблем с threejs кода анимации:

подвижные кости ссылаются как "parent":9 и 13 в JSON (плечи костей).
замените некоторые 0 значений в массиве skinIndices с 9 и 13 значениями.
Обновить страницу: эти вершины будут анимироваться так же, как плечи в Blender.

Теперь вам нужно прочитать учебник о обесшкуривания в Blender :)

источник

2015-07-10 09:49:08 Atrahasis

, пожалуйста, воздержитесь за 4 часа, которые я потратил на него со вчерашнего дня ^^ – Atrahasis

Большое спасибо, извините за это. –

no pblm i был действительно заинтригован, поскольку ошибок больше не было, и у json были все необходимые параметры. – Atrahasis

Three.js - Анимация не отображается в браузере

ответ

Смежные вопросы