I'm currently working on creating a map of 2D SVG tiles using three.js. I've utilized SVGLoader() as shown below:
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;
}
Please disregard the fact that there are multiple instances of try{}catch(){}
In addition to this, I have implemented grid lines and incorporated them into my axis helper within the application so I can visually understand the positioning of each coordinate in relation to the X and Y axis.
The visualization of the SVG on screen can be seen here: Application Output
I am having trouble aligning the scale of the SVG with the individual grid lines. I suspect that I need to delve deeper into the SVG loading script mentioned above and scale each shape mesh accordingly. The following code references the SVG group itself.
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);
}
Note that the SVG corresponds to object2 in this context. Some approaches I'm considering to address this issue include exploring what a world scale entails, matrix4 transformations, and the scaling methods of either the object3d parent properties or the bufferGeometry parent properties of this specific SVG group object. While three.js is primarily geared towards 3D graphics, I aim to master 2D graphics programming with this library before delving into the 3D realm. There's also a notion that the scale of the SVG group differs significantly from the scale of the scene and its X, Y, and Z axes.
If this query has already been answered, a link to the relevant response would greatly assist me.
Thank you for taking the time to address this inquiry.