I am working on rendering the SVG file in the three js. A take help of the tiger example https://threejs.org/examples/#webgl_loader_svg it works fine tiger SVG but it doesn’t work with my SVG.
WIth my SVG file, there is a black box comes in, it can not understand what is it and how to correct it
SVG file I need to render: https://drive.google.com/file/d/1gEXsJ2gql_NMOEMJpQwUCgMkYQNBDqHr/view?usp=sharing
Any help will be appreciated.
loader.load(
// resource URL
'svg/Img2.svg',
//'https://svgshare.com/i/H53.svg',
// called when the resource is loaded
function (data) {
var paths = data.paths;
var group = new THREE.Group();
group.position.x = - 70;
group.position.y = 0;
group.scale.y *= - 5;
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var fillColor = path.userData.style.fill;
//if (guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none') {
if (true && fillColor !== undefined && fillColor !== 'none') {
var material = new THREE.MeshBasicMaterial({
color: new THREE.Color().setStyle(fillColor),
opacity: path.userData.style.fillOpacity,
transparent: path.userData.style.fillOpacity < 1,
side: THREE.DoubleSide,
depthWrite: false,
wireframe: 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);
}
}
var strokeColor = path.userData.style.stroke;
//if (guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none') {
if (true && strokeColor !== undefined && strokeColor !== 'none') {
var material = new THREE.MeshBasicMaterial({
color: new THREE.Color().setStyle(strokeColor),
opacity: path.userData.style.strokeOpacity,
transparent: path.userData.style.strokeOpacity < 1,
side: THREE.DoubleSide,
depthWrite: false,
wireframe: false
});
for (var j = 0, jl = path.subPaths.length; j < jl; j++) {
var subPath = path.subPaths[j];
debugger
var geometry = THREE.SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style);
if (geometry) {
var mesh = new THREE.Mesh(geometry, material);
group.add(mesh);
}
}
}
}
scene.add(group);
//group.scale.set(4,4,4)
//svgGroup.position.y = 10;
},
// called when loading is in progresses
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
// called when loading has errors
function (error) {
console.log('An error happened');
}
);`Preformatted text`