three.js - 如何将另一个场景对象附加到我的动画、导入的 collada 网格？

Question

我使用 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 );

        }

提前谢谢了!

Answer 1

你可以做一些像旧的 Quake MD2 模型这样的事情——每个 Prop 也是动画变形，动画帧同步到基础网格的所有动画帧(例如 running_gun、idle_gun、running_hat、idle_hat)。

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

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

您需要在导出模型时执行此操作，将所有 Prop 与基础模型一起设置动画，然后逐个导出它们。

它不会非常优雅或高效，但它应该可以完成工作并直接开箱即用(如 MD2 模型，最终也会变成变形，您只需要将 Assets 管道映射到 MD2 管道)。

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

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

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

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