After searching online, I have been unable to find a method to extrude a colored image in Three.js. My goal is to create a design similar to a Minecraft item where the image is used to generate an extruded geometry. An example of what I'm trying to achieve can be seen here:
I have explored a resource at this link: , but it only supports extruding uncolored SVGs.
loader.load('./textures/diamondbleu.svg', function (data) {
// Group specifically for SVG paths
const svgGroup = new THREE.Group();
// Y axis inversion during SVG import
svgGroup.scale.y *= -1;
const material = new THREE.MeshLambertMaterial();
// Iterate through all parsed paths
data.paths.forEach((path, i) => {
const shapes = path.toShapes(true);
// Each path contains shapes
shapes.forEach((shape, j) => {
// Extrude each shape
const geometry = new THREE.ExtrudeGeometry(shape, {
depth: 20,
bevelEnabled: false
});
// Create mesh and add to group
const mesh = new THREE.Mesh(geometry, material);
svgGroup.add(mesh);
});
});
// Calculate group's dimensions
const box = new THREE.Box3().setFromObject(svgGroup);
const size = new THREE.Vector3();
box.getSize(size);
const yOffset = size.y / -2;
const xOffset = size.x / -2;
// Center group elements
svgGroup.children.forEach(item => {
item.position.x = xOffset;
item.position.y = yOffset;
});
svgGroup.position.set(0, blockSize*75, 0);
scene.add(svgGroup);
})
Is there a way to modify this code to support colored SVGs? Thank you!