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

古き良きQuakeMD2モデルのようなことを行うことができます-すべてのプロップは、ベースメッシュのすべてのアニメーションフレーム（running_gun、idle_gun、running_hat、idle_hatなど）に同期されたアニメーションフレームを備えたアニメーションモーフでもあります。

たとえば、ここの武器を参照してください。

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

モデルをエクスポートするときにこれを行う必要があります。すべてのプロップをベースモデルと一緒にアニメーション化してから、それらを1つずつ個別にエクスポートします。

あまりエレガントでも効率的でもありませんが、すぐに機能し、すぐに機能するはずです（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 に答える