Question

我正在尝试寻找一种方法来对Canadarm2的Collada模型中的孩子进行动画处理。该模型包含7个臂段，这些臂段的角度需要通过一次从一行7个电子表格列的每一行读取旋转角数据来设置。每行包含7列数据，表示一小时或更长时间的任务中每一秒的角度。

我希望有人可以提出一个解决方案，让我入门-也许类似我在下面的animate（）函数中尝试过的猜测。

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

        var container, stats, clock;
        var camera, scene, renderer, canadarm2;

        init();
        animate();

        function init() {

            container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
            camera.position.set( 8, 10, 80 );
            camera.lookAt( new THREE.Vector3( 0, 3, 0 ) );

            scene = new THREE.Scene();

            clock = new THREE.Clock();

            // loading manager

            var loadingManager = new THREE.LoadingManager( function() {

                scene.add( canadarm2 );

            } );

            // collada

            var loader = new THREE.ColladaLoader( loadingManager );
            //loader.load( 'examples/models/collada/elf/elf.dae', function ( collada ) {
            loader.load( 'canadarm2.dae', function ( collada ) {

                canadarm2 = collada.scene;

            } );

            //

            var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
            scene.add( ambientLight );

            var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
            directionalLight.position.set( 1, 1, 0 ).normalize();
            scene.add( directionalLight );

            //

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            //

            stats = new Stats();
            container.appendChild( stats.dom );

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            /*
            //#######################################
            // doesn't work
            var armEP = canadarm2.getChildByName("EP", true);// EP is one of 7 arms
            armEP.position.x += 0.01;
            armEP.rotation.y += 45;
            //#######################################
            */

            render();
            stats.update();

        }

        function render() {

            var delta = clock.getDelta();

            if ( canadarm2 !== undefined ) {

                canadarm2.rotation.z += delta * 0.5;

            }

            renderer.render( scene, camera );

        }

Answer 1

这似乎很有效，尽管它似乎是一种round回定位武器的方法。

scene.traverse(function (child) {
    switch(child.name) {
        case "SR":
            child.rotation.x += 0.01;
            break;
        case "SP":
            child.rotation.y += 0.01;
            break;
        case "SY":
            child.rotation.y += 0.01;
            break;
        case "EP":
            child.rotation.y += 0.01;
            break;
        case "WP":
            child.rotation.x += 0.01;
            break;
        case "WY":
            child.rotation.y += 0.01;
            break;
        case "WR":
            child.rotation.x += 0.01;
            break;
    }
});

如何在three.js中为Collada模型的子代设置动画？

1 个答案: