Merge branch 'svg-extruder-issues' of https://github.com/3DStreet/3ds…

…treet into svg-extruder-issues
3DStreet · Feb 27, 2024 · 7e9be13 · 7e9be13
2 parents 24143b8 + e0d97c2
commit 7e9be13
Showing 1 changed file with 13 additions and 31 deletions.
diff --git a/src/components/svg-extruder.js b/src/components/svg-extruder.js
@@ -14,25 +14,21 @@ AFRAME.registerComponent('svg-extruder', {
     this.stokeMaterial = new THREE.LineBasicMaterial({
       color: '#00A5E6'
     });
-    // fix texture scale for extruded geometry
-    el.setAttribute('material', 'repeat: 0.01 0.01');
+
     // set scale for extruded svg
     el.setAttribute('shadow', 'cast: true; receive: true');
   },
   extrudeFromSVG: function (svgString) {
     const depth = this.data.depth;
     const el = this.el;
     const svgData = this.loader.parse(svgString);
-    const fillMaterial = this.material;
+    const fillMaterial = new THREE.MeshStandardMaterial();
 
     const extrudeSettings = {
       depth: depth,
       bevelEnabled: false
     };
 
-    // svgGroup.scale.y *= -1;
-    let shapeIndex = 0;
-
     const shapeGeometryArray = [];
 
     svgData.paths.forEach((path) => {
@@ -42,42 +38,31 @@ AFRAME.registerComponent('svg-extruder', {
         const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
         shapeGeometryArray.push(geometry);
 
-        const linesGeometry = new THREE.EdgesGeometry(geometry);
-        const lines = new THREE.LineSegments(linesGeometry, this.stokeMaterial);
-
-        el.setObject3D('lines' + shapeIndex, lines);
-        lines.name = 'lines' + shapeIndex;
-        shapeIndex += 1;
       });
     });
 
     // Merge array of extruded geometries into the mergedGeometry
     const mergedGeometry =
       THREE.BufferGeometryUtils.mergeBufferGeometries(shapeGeometryArray);
-
+
+    mergedGeometry.computeBoundingBox();
     mergedGeometry.computeVertexNormals();
+    mergedGeometry.center();
+    mergedGeometry.rotateX(Math.PI / 2);
+    mergedGeometry.scale(0.05,0.05,0.05)
+
+    const linesGeometry = new THREE.EdgesGeometry(mergedGeometry);
+    const lines = new THREE.LineSegments(linesGeometry, this.stokeMaterial);
+
+    el.setObject3D('lines', lines);
 
     // Finally, create a mesh with the merged geometry
     const mergedMesh = new THREE.Mesh(mergedGeometry, fillMaterial);
 
     // remove existing mesh from entity
     el.removeObject3D('mesh');
-
     el.setObject3D('mesh', mergedMesh);
 
-    const box = new THREE.Box3().setFromObject(mergedMesh);
-    const size = box.getSize(new THREE.Vector3());
-
-    const zOffset = size.y / -2;
-    const xOffset = size.x / -2;
-
-    // Offset all of extruded elements, to center them
-    el.object3D.children.forEach((item) => {
-      item.position.x = xOffset;
-      item.position.y = zOffset;
-    });
-
-    el.object3D.rotateX(Math.PI / 2);
   },
   update: function (oldData) {
     // If `oldData` is empty, then this means we're in the initialization process.
@@ -89,12 +74,9 @@ AFRAME.registerComponent('svg-extruder', {
 
     if (svgString) {
       this.extrudeFromSVG(svgString);
-      if (!el.getAttribute('scale')) {
-        el.setAttribute('scale', '0.05 0.05 0.05');
-      }
       if (!el.getAttribute('material')) {
         // applies the default mixin material grass. If the element's material is not set via setAttribute
-        el.setAttribute('material', 'src:#grass-texture;roughness:1');
+        el.setAttribute('material', 'src:#grass-texture;roughness:1;repeat: 0.01 0.01');
       }
     }
   }