在 three.js 中缩放二维 SVG 组 object

Question

I'm attempting to create a map of 2d SVG tiles in three.js. I have used SVGLoader() Like so (Keep in mind some brackets are for parent scopes that aren't shown. That is not the issue):

loader = new SVGLoader();

    loader.load(
        // resource URL
        filePath,

        // called when the resource is loaded
        function ( data ) {
            console.log("SVG file successfully loaded");
    
            const paths = data.paths;
            
    
            for ( let i = 0; i < paths.length; i ++ ) {
    
                const path = paths[ i ];
                
                const material = new THREE.MeshBasicMaterial( {
                    color: path.color,
                    side: THREE.DoubleSide,
                    depthWrite: false
                } );
    
                const shapes = SVGLoader.createShapes( path );
                console.log(`Shapes length = ${shapes.length}`);
                try{
                    for ( let j = 0; j < shapes.length; j ++ ) {
    
                        const shape = shapes[ j ];
                        
                        const geometry = new THREE.ShapeGeometry( shape );
                        const testGeometry = new THREE.PlaneGeometry(2,2);
                        
                        try{
                            const mesh = new THREE.Mesh(geometry, material );
                            group.add( mesh );
                        }catch(e){console.log(e)}
                        
                        
        
                    }
                }catch(e){console.log(e)}

    
            }
        },

        // called when loading is in progress
        function ( xhr ) {
    
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    
        },
        // called when loading has errors
        function ( error ) {
    
            console.log( 'An error happened' );
    
        }
    );
    return group;
}

Dismiss the fact that I surrounded alot of it in try{}catch(){}

I have also created grid lines and added it to my axis helper in the application that allows me to see where each cooordinate is, in relation to the X and Y axis.

This is how the svg appears on screen: Application Output

I can't seem to figure out how to correlate the scale of the svg, with the individual grid lines. I have a feeling that Im going to have to dive deeper into the SVG loading script that I have above then scale each shape mesh specifically. I call the SVG group itself in the following code.

try{
    //SVG returns a group, TGA returns a texture to be added to a material
    var object1 = LOADER.textureLoader("TGA", './Art/tile1.tga', pGeometry);
    var object2 = LOADER.textureLoader("SVG", '/Art/bitmap.svg');
    

    const testMaterial = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        map: object1,
        side: THREE.DoubleSide
    });

    //const useMesh = new THREE.Mesh(pGeometry, testMaterial);

    //testing scaling the tile
    try{
        const worldScale = new THREE.Vector3();
        
        object2.getWorldScale(worldScale);

        console.log(`World ScaleX: ${worldScale.x} World ScaleY: ${worldScale.y} World ScaleZ: ${worldScale.z}`);
        //object2.scale.set(2,2,0);

    }catch(error){console.log(error)}
    


    scene.add(object2);
}

Keep in mind that the SVG is object2 in this case. Some of the ideas to tackle this problem I have had is looking into what a world scale is, matrix4 transformations, and the scale methods of either the object3d parent properties or the bufferGeometry parent properties of this particular svg group object. I am also fully aware that three.js is designed for 3d graphics, however I would like to master 2d graphics programming in this library before I get into the 3d aspect of things. I also have a thought that the scale of the SVG group is distinctly different from the scale of the scene and its XY and Z axis.

If this question has already been answered a link to the corresponding answer would be of great help to me.

Thank you for the time you take to answer this question.

Answer 1

I messed with the dimensions of the svg file itself in the editor I used to paint it and I got it to scale. Not exactly a solution in the code, however I guess the code is just closely tied to the data that the svg file provides and cant be altered too much.