2

我使用 Three.js 设置了以下动画:

http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man2.html

请忽略绳状加权网格,这是一个快速重新模拟。真正的交易可以在这里找到(http://frontier.lincoln.ac.uk/3d/development/Stage2/characters/man.html

这就是问题所在。看到他的红帽子了吗?(在第一个 URL 中)。那应该在他的头上。所以,我创建了一个虚拟对象(角色头顶上的绿色小立方体)。这不是角色皮肤的一部分,可以作为皮肤的子对象来处理。

但是,由于角色网格受动画的支配(morphTargetInfulences 等 - 我还没有完全弄清楚它是如何工作的)我如何将帽子放置在虚拟对象所在的位置并让它移动它?

这是代码的业务端,但可以随意绕过上述文件的源:

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats;

        var camera, scene, renderer;
        var particleLight, pointLight;
        var dae, skin, skin2, headgear, test2;

        var faceMaterial = new THREE.MeshFaceMaterial();
        var loader = new THREE.JSONLoader();
        loader.load('../../../models/test_models/hat.js', function colladaReady( geometry ) {
            headgear = new THREE.Mesh(geometry, faceMaterial);
            loadMan();
        });

        function loadMan(){

            var loader = new THREE.ColladaLoader();
            loader.load( '../../../models/test_models/test4.DAE', function colladaReady( collada ) {
                dae = collada.scene;
                skin = collada.skins[0];
                //this is the reference to the dummy object
                skin2 = collada.skins[0].children[0];
                dae.getChildByName( "node-CATRigHub001", true ).scale.set(0.1, 0.1, 0.1);
                dae.position.y = -2
                dae.scale.x = dae.scale.y = dae.scale.z = 0.1;
                dae.rotation.x = -Math.PI/2;
                //here is where i've added to the hat to the dummy object
                skin2.add(headgear);
                dae.updateMatrix();

                init();
                animate();
            } );

        }

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.set( 2, 2, 3 );

            scene = new THREE.Scene();

            scene.add( dae );

            particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xcccccc } ) );
            scene.add( particleLight );

            // Lights

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

            var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xcccccc );
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add( directionalLight );

            pointLight = new THREE.PointLight( 0xcccccc, 3 );
            pointLight.position = particleLight.position;
            scene.add( pointLight );

            renderer = new THREE.WebGLRenderer();
            //renderer = new THREE.CanvasRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

        }

        var t = 0;
        function animate() {

            requestAnimationFrame( animate );

            if ( t > 24 ) t = 0;
            if ( skin ) {
                for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
                    skin.morphTargetInfluences[ i ] = 0;
                    skin2.morphTargetInfluences[ i ] = 0;
                }

                skin.morphTargetInfluences[ Math.floor( t ) ] = 1;
                skin2.morphTargetInfluences[ Math.floor( t ) ] = 1;

                t += 0.5;

            }

            render();
            stats.update();

        }

        function render() {

            var timer = Date.now() * 0.0005;

            camera.position.x = Math.cos( timer ) * 10;
            camera.position.y = 2;
            camera.position.z = Math.sin( timer ) * 10;

            camera.lookAt( scene.position );

            particleLight.position.x = Math.sin( timer * 4 ) * 3009;
            particleLight.position.y = Math.cos( timer * 5 ) * 4000;
            particleLight.position.z = Math.cos( timer * 4 ) * 3009;

            renderer.render( scene, camera );

        }

提前谢谢了!

4

2 回答 2

2

你可以做一些类似旧的 Quake MD2 模型的东西——每个道具也是动画变形,动画帧同步到基础网格的所有动画帧(例如 running_gun、idle_gun、running_hat、idle_hat)。

例如,请参见此处的武器:

http://alteredqualia.com/three/examples/webgl_morphtargets_md2.html

您需要在导出模型时执行此操作,将所有道具与基础模型一起制作动画,然后逐个导出它们。

它不会非常优雅或高效,但它应该可以直接完成工作和工作(如 MD2 模型,最终也会作为变形,您只需将资产管道映射到 MD2 管道)。

正如您提到的 Collada,另一种选择可能是以某种方式在变形之外使用原始骨架(也就是说,如果您的模型确实有骨架,我认为 Collada 允许蒙皮和变形)。

虽然我猜这需要弄乱 ColladaLoader(变形是通过软件蒙皮烘焙的,所以关于骨骼框架的信息在某处,应该有类似“头骨”的东西)。

或者,除了蒙皮/变形的基础网格之外,您还可以以某种方式将道具的刚体动画分层到 Collada 中,类似于此处的动画部分:

http://mrdoob.github.com/three.js/examples/webgl_loader_collada_keyframe.html

于 2012-06-15T07:14:13.497 回答
1

我认为您应该将帽子添加为您正在制作动画的皮肤的一部分。

于 2012-06-14T20:05:53.663 回答