ТРИ. js - Как ДВАЖДАТЬ отдельные пути / полигоны импортированного SVG? - PullRequest
Новая
       21

ТРИ. js - Как ДВАЖДАТЬ отдельные пути / полигоны импортированного SVG?

0 голосов
/ 14 марта 2020

Я импортировал тестовый SVG с использованием SVGLoader и смог анимировать объект SVG с помощью Tween. js.

Я хочу анимацию отдельных путей и полигонов в загруженном объекте 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: 

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

1 Ответ

1 голос
/ 14 марта 2020

Я нашел следующее решение для этого. По сути, добавление триггера анимации в функцию загрузчика и передача переменной me sh, (не group ) - позволяет выполнять анимацию на составных путях и многоугольниках et c 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();
}
...