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

我已经弄明白了。问题是缩放。我的头像太大了，所以我看不到它在浏览器上显示。

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

1 个答案: