我可以用我自己的头像替换 three.js 示例 morphtargets_human 中使用的头像吗？

Question

我正在尝试将 three.js 示例 morphtargets_human and replace the avatar used with my own avatar. I studied the files used in this example and I cannot see why I cannot replace it. I created an avatar 与变形目标（1 个变形目标 + 默认值）和骨架一起使用。我将变形目标导出为变形动画，将骨架导出为骨骼动画（似乎需要变形目标和骨骼动画才能工作）。我用浏览器打开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

我已经弄明白了。问题是缩放。我的头像太大，浏览器看不到

我可以用我自己的头像替换 three.js 示例 morphtargets_human 中使用的头像吗？

Can I replace the avatar used in the three.js example morphtargets_human with my own avatar?

animation

avatar

blender

three.js