The Normal Map, Roughness Map etc is not visible on the 3D Objects I extruded from an SVG. I have tested it with normal Box Geometrys and there it worked perfectly fine. Color, Opacity etc is also applied correctly on the Shapes.
Maybe its an issue with the UV map?
Hope someone can help.
Below is my code, if any of you needs more details just say so :).
import * as THREE from "three";
export async function createSCP() {
const loader = new SVGLoader();
const group = new THREE.Group();
const groupSize = new THREE.Vector3();
const glasSize = 40;
const textureLoader = new THREE.TextureLoader();
// SVG-Datei asynchron laden
const data = await new Promise((resolve, reject) => {
loader.load("/images/t_two.svg", resolve, undefined, reject);
});
const ceramicMaterial = createTexture(
"ceramic_tiles",
1,
true,
true,
true,
true,
true,
1,
0.5,
1,
0
);
const material = new THREE.MeshStandardMaterial({
color: 0x00affa,
roughness: 1,
normalMap: textureLoader.load(`/textures/plastic/normal.webp`),
});
material.normalScale.set(1, 1);
material.roughnessMap = textureLoader.load(
`/textures/plastic/roughness.webp`
);
const glassMaterial = new THREE.MeshPhysicalMaterial({
color: 0xaaaaaa,
roughness: 0,
transmission: 1,
thickness: 5,
ior: 1.5,
reflectivity: 0.5,
clearcoat: 1,
clearcoatRoughness: 0,
});
const paths = data.paths;
for (const path of paths) {
const shapes = path.toShapes(true);
const tagName = path.userData.node.tagName.toLowerCase();
for (const shape of shapes) {
const scaledShape = scaleShape(shape, 1, glasSize);
const geometry = new THREE.ExtrudeGeometry(
tagName === "rect" ? scaledShape : shape,
{
depth: 10000,
bevelEnabled: tagName === "rect",
bevelSize: 8,
UVGenerator: THREE.ExtrudeGeometry.WorldUVGenerator,
bevelThickness: 2,
bevelSegments: 1,
bevelOffset: -8,
}
);
// Plane-Mapping
geometry.computeBoundingBox();
const size = new THREE.Vector2(
geometry.boundingBox.max.x - geometry.boundingBox.min.x,
geometry.boundingBox.max.y - geometry.boundingBox.min.y
);
glassMaterial.roughness = 1;
const mesh = new THREE.Mesh(
geometry,
tagName === "rect" ? material : ceramicMaterial
);
mesh.scale.set(0.001, 0.001, 0.001);
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.rotateY(Math.PI / 2);
mesh.updateMatrixWorld();
const boundingBox = new THREE.Box3().setFromObject(mesh);
boundingBox.getSize(size);
if (tagName === "rect") {
mesh.position.y -= size.y - size.y / glasSize;
}
group.add(mesh);
}
}
// Gesamtgröße berechnen
const boundingBox = new THREE.Box3().setFromObject(group);
boundingBox.getSize(groupSize);
// Mittig ausrichten
group.rotation.set(0, Math.PI / 2, Math.PI);
group.position.set(groupSize.z / 2, 0, -groupSize.x / 2);
return group;
}
function scaleShape(shape, scaleX, scaleY) {
const points = shape.getPoints();
const scaledPoints = points.map(
(p) => new THREE.Vector2(p.x * scaleX, p.y * scaleY)
);
return new THREE.Shape(scaledPoints);
}