Normale Karte wird in drei.js nicht auf extrudiertem SVG angezeigt ⇐ JavaScript

[Anonymous]

Die normale Karte, Rauheitskarte usw. ist auf den 3D -Objekten, die ich von einem SVG extrudiert habe, nicht sichtbar. Ich habe es mit normalen Boxgeometrie getestet und dort hat es vollkommen in Ordnung gearbeitet. Farbe, Deckkraft usw. wird auch korrekt auf die Formen angewendet.
Vielleicht ist es ein Problem mit der UV -Karte? p> unten ist mein Code, wenn einer von Ihnen weitere Details benötigt. Sagen Sie es einfach .

Code: Select all

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);
}