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模型 - 每个道具都是动画变形，动画帧同步到基础网格的所有动画帧（例如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

Answer 2

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

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

2 个答案: