THREE.js-如何在导入SVG的各个路径/多边形之间切换？

我已经使用SVGLoader导入了一个测试SVG，并且能够使用tween.js在SVG对象之间切换

我想在加载的SVG对象中的各个路径和多边形之间进行比较——这可能吗

SVGLoader：

var loader = new THREE.SVGLoader();
loader.load( 'svg/test.svg', function ( paths ) {

    var group = new THREE.Group();
    group.scale.multiplyScalar( 0.25 );
    group.position.x = -150;
    group.position.y = 70;
    group.scale.y *= - 1;

    for ( var i = 0; i < paths.length; i ++ ) {
        var path = paths[ i ];

        var material = new THREE.MeshBasicMaterial( {
            color: path.color,
            side: THREE.DoubleSide,
            depthWrite: false
        } );

        var shapes = path.toShapes( true );

        for ( var j = 0; j < shapes.length; j ++ ) {
            var shape = shapes[ j ];
            var geometry = new THREE.ShapeBufferGeometry( shape );
            var mesh = new THREE.Mesh( geometry, material );
            group.add( mesh );
        }
    }
    scene.add( group );

} );

---

我找到了以下解决方案。本质上，将tween触发器添加到loader函数中并传递变量mesh，（而不是group）-允许在SVG的组成路径和多边形等上进行tween。为了进一步了解这一点，我将找出如何分别为每个对象执行tween，这在这一点上应该不会太棘手

新的SVG加载程序：

var loader = new THREE.SVGLoader();
loader.load( 'svg/test.svg', function ( paths ) {

    var group = new THREE.Group();
    group.scale.multiplyScalar( 0.25 );
    group.position.x = -150;
    group.position.y = 70;
    group.scale.y *= - 1;

        for ( var i = 0; i < paths.length; i ++ ) {
        var path = paths[ i ];

        var material = new THREE.MeshBasicMaterial( {
            // color: path.color,
            color: 0xff0000,
            side: THREE.DoubleSide,
            depthWrite: false
        } );

        var shapes = path.toShapes( true );

        for ( var j = 0; j < shapes.length; j ++ ) {
            var shape = shapes[ j ];

            var geometry = new THREE.ExtrudeGeometry(shape, {
              depth: 1,
              bevelEnabled: false
            });
            var mesh = new THREE.Mesh( geometry, material );

            // Randomly position each constituent mesh to demo 
            randX = Math.random() * (20000 - -20000) + -20000;
            randY = Math.random() * (20000 - -20000) + -20000;
            randZ = Math.random() * (20000 - -20000) + -20000;
            mesh.position.set( randX, randY, randZ );

            group.add( mesh );

        }
        triggerTweens(mesh); // Trigger tweens passing mesh variable
    }
    scene.add( group );

} );

var loader = new THREE.SVGLoader();
loader.load( 'svg/test.svg', function ( paths ) {

    var group = new THREE.Group();
    group.scale.multiplyScalar( 0.25 );
    group.position.x = -150;
    group.position.y = 70;
    group.scale.y *= - 1;

        for ( var i = 0; i < paths.length; i ++ ) {
        var path = paths[ i ];

        var material = new THREE.MeshBasicMaterial( {
            // color: path.color,
            color: 0xff0000,
            side: THREE.DoubleSide,
            depthWrite: false
        } );

        var shapes = path.toShapes( true );

        for ( var j = 0; j < shapes.length; j ++ ) {
            var shape = shapes[ j ];

            var geometry = new THREE.ExtrudeGeometry(shape, {
              depth: 1,
              bevelEnabled: false
            });
            var mesh = new THREE.Mesh( geometry, material );

            // Randomly position each constituent mesh to demo 
            randX = Math.random() * (20000 - -20000) + -20000;
            randY = Math.random() * (20000 - -20000) + -20000;
            randZ = Math.random() * (20000 - -20000) + -20000;
            mesh.position.set( randX, randY, randZ );

            group.add( mesh );

        }
        triggerTweens(mesh); // Trigger tweens passing mesh variable
    }
    scene.add( group );

} );

// Bring all meshes back to position 0,0,0 Over 5000ms
function triggerTweens(mesh) {
    new TWEEN.Tween( mesh.position ).to( { x: 0, y: 0, z: 0 }, 5000 ).easing(TWEEN.Easing.Cubic.In).start();
}