THREE.js -如何补间导入的SVG的单独路径/多边形？

Question

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

} );

补间函数：

triggerTweens();
function triggerTweens() {
    new TWEEN.Tween( title.position ).to( { x: 10 }, 5000 ).start();
}

Answer 1

我找到了以下解决方案。本质上是将补间触发器添加到装载器函数中并传递变量SVG mesh(而不是组)-允许对SVG的构成路径和多边形等进行补间。为了更进一步，我将弄清楚如何分别为每个人执行补间，这在这一点上应该不会太棘手。

新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 );

} );

新的补间函数：

// 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();
}