我可以用我自己的頭像替換three.js example morphtargets_human中使用的頭像嗎？

Question

我正在嘗試使用three.js示例morphtargets_human並用我自己的頭像替換使用的頭像。我研究了這個例子中使用的文件，我看不出爲什麼我無法替換它。我創建了一個帶有變形目標（1個變形目標+默認值）和骨架的avatar。我將變形目標導出爲變形動畫，並將骨架導出爲骨架動畫（這似乎需要變形目標和骨骼動畫才能起作用）。當我在瀏覽器上打開javascript文件時，我只能看到dat gui控件，但不顯示頭像。我該如何做這項工作？

附加文件：umich_ucs.js， UCSCharacter.js，UCS_config.json，Detector.js，dat.gui.min.js，three.min.js，OrbitControls.js

的jsfiddle：link

 var SCREEN_WIDTH = window.innerWidth; 
     var SCREEN_HEIGHT = window.innerHeight; 

     var container; 

     var camera, scene; 
     var renderer; 

     var mesh; 

     var mouseX = 0, mouseY = 0; 

     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 

     var clock = new THREE.Clock(); 

     var gui, skinConfig, morphConfig; 

     document.addEventListener('mousemove', onDocumentMouseMove, false); 

     init(); 
     animate(); 

     function init() { 

      container = document.getElementById('container'); 

      camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 100000); 
      camera.position.set(2000, 5000, 5000); 

      scene = new THREE.Scene(); 

      // LIGHTS 

      var light = new THREE.DirectionalLight(0xffffff, 1); 
      light.position.set(0, 140, 500); 
      light.position.multiplyScalar(1.1); 
      light.color.setHSL(0.6, 0.075, 1); 
      scene.add(light); 

      // 

      var light = new THREE.DirectionalLight(0xffffff, 1); 
      light.position.set(0, -1, 0); 
      scene.add(light); 

      // RENDERER 

      renderer = new THREE.WebGLRenderer({ antialias: true }); 
      renderer.setClearColor(0xffffff); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
      container.appendChild(renderer.domElement); 

      // CHARACTER 

      character = new THREE.UCSCharacter(); 
      character.onLoadComplete = function() { 
       console.log("Load Complete"); 
       console.log(character.numSkins + " skins and " + character.numMorphs + " morphtargets loaded."); 
       gui = new dat.GUI(); 
       setupSkinsGUI(); 
       setupMorphsGUI(); 
       gui.width = 300; 
       gui.open(); 
      } 

      var loader = new THREE.XHRLoader(); 
      loader.load("http://threejs.org/examples/models/skinned/UCS_config.json", function (text) { 

       var config = JSON.parse(text); 
       character.loadParts(config); 
       scene.add(character.root); 

      }); 

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

      controls = new THREE.OrbitControls(camera, renderer.domElement); 
      controls.center.set(0, 3000, 0); 

      controls.addEventListener('change', render); 

     } 

     function setupSkinsGUI() { 

      var skinGui = gui.addFolder("Skins"); 

      skinConfig = { 
       wireframe: false 
      }; 

      var skinCallback = function(index) { 
       return function() { 
        character.setSkin(index); 
       }; 
      } 

      for (var i = 0; i < character.numSkins; i++) { 
       var name = character.skins[ i ].name; 
       skinConfig[ name ] = skinCallback(i); 
      } 

      for (var i = 0; i < character.numSkins; i++) { 
       skinGui.add(skinConfig, character.skins[i].name); 
      } 

      skinGui.open(); 

     } 

     function setupMorphsGUI() { 

      var morphGui = gui.addFolder("Morphs"); 

      morphConfig = { 
      }; 

      var morphCallback = function(index) { 
       return function() { 
        character.updateMorphs(morphConfig); 
       } 
      } 

      for (var i = 0; i < character.numMorphs; i ++) { 
       var morphName = character.morphs[ i ]; 
       morphConfig[ morphName ] = 0; 
      } 

      for (var i = 0; i < character.numMorphs; i ++) { 
       morphGui.add(morphConfig, character.morphs[ i ]).min(0).max(100).onChange(morphCallback(i)); 
      } 

      morphGui.open(); 

     } 

     function onWindowResize() { 

      windowHalfX = window.innerWidth/2; 
      windowHalfY = window.innerHeight/2; 

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

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

     } 

     function onDocumentMouseMove(event) { 

      mouseX = (event.clientX - windowHalfX) * 10; 
      mouseY = (event.clientY - windowHalfY) * 10; 

     } 

     // 

     function animate() { 

      requestAnimationFrame(animate); 

      controls.update(); 

      render(); 

     } 

     function render() { 

      var delta = 0.75 * clock.getDelta(); 

      // update skinning 

      THREE.AnimationHandler.update(delta); 

      renderer.render(scene, camera); 

     } 

Answer 1

我已經想通了這一點。問題在擴大。我的頭像太大，所以我看不到它在瀏覽器上顯示。