Programmiererforum

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