javascript - Normal Map is not displayed on Extruded SVG in THREE.js - Stack Overflow

admin管理员组

文章数量:1415653

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

本文标签： javascriptNormal Map is not displayed on Extruded SVG in THREEjsStack Overflow