Hi there,
I am just getting to grips with Three.js and am struggling a bit with getting one of my SVG’s to load correctly. It seems that when I fill some of the paths, it’s adding a fill to parts I am not expecting.
I’m not sure if this is due to the SVG I am using or whether I am doing something wrong with the implementation - hoping someone could help me out!
Here is a screenshot of the expected SVG (I have added a black background so you can visually see it):
Here is it being rendered to the canvas:
You can see there’s something weird going on with the fill color.
Here is the code I am using to render the SVG:
const veinsSVGLoader = new SVGLoader(manager)
veinsSVGLoader.load(
'<MY_SVG_URL>',
(data) => {
const paths = data.paths
const group = new THREE.Group()
group.scale.set(0.0015, -0.0015, 0.0015) // Scale down for large SVGs
group.position.set(-0.72, 1.712, 0.15) // Center the SVG in the scene
paths.forEach((path, index) => {
const subGroup = new THREE.Group()
const fillColor = path.userData.style.fill
if (fillColor) {
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color().setStyle(fillColor),
side: THREE.DoubleSide,
depthWrite: false,
transparent: true,
})
const shapes = SVGLoader.createShapes(path)
shapes.forEach((shape) => {
const geometry = new THREE.ShapeGeometry(shape)
const mesh = new THREE.Mesh(geometry, material)
subGroup.add(mesh)
})
}
const strokeColor = path.userData.style.stroke
if (strokeColor) {
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color().setStyle(strokeColor),
side: THREE.DoubleSide,
depthWrite: false,
transparent: true,
})
const shapes = SVGLoader.createShapes(path)
shapes.forEach((shape) => {
const geometry = new THREE.ShapeGeometry(shape)
const mesh = new THREE.Mesh(geometry, material)
subGroup.add(mesh)
})
}
subGroup.name = `group-${index}`
group.add(subGroup)
})
group.renderOrder = 2
scene.add(group)
},
function (xhr) {
console.log(`Veins: ${(xhr.loaded / xhr.total) * 100}% loaded`)
},
function (error) {
console.log('Veins: An error happened')
},
)
I have also attached the SVG if that helps!
Hoping someone can provide some info!
Thanks in advance.
Jack