CODEWITHSUNDEEP
svgthree.jstween.js
Toki
Toki

Reputation: 587

THREE.js - How to TWEEN individual paths/polygons of imported SVG?

I have imported a test SVG using the SVGLoader and am able to tween the SVG object using Tween.js.

I would like to tween the individual paths and polygons within the loaded SVG object - is this possible?

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 Function:

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

Upvotes: 0

Views: 148

Answers (1)

Toki
Toki

Reputation: 587

I have found the following solution to this. Essentially adding the tween trigger into the loader function and passing the variable mesh, ( not group ) - allows tweening on the constituent paths and polygons etc of the SVG. To take this a step further I will figure out how to perform the tween for each separately which shouldn't be too tricky at this point.

New SVG Loader:

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

} );

New Tween Function:

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

Upvotes: 1

Related Questions