Merge pull request #480 from 3DStreet/svg-extruder-issues

Svg extruder issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dstreet",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Web-based 3D visualization of streets using A-Frame and WebXR",
   "main": "dist/aframe-street-component.js",
   "scripts": {

src/components/svg-extruder.js

@@ -11,32 +11,19 @@ AFRAME.registerComponent('svg-extruder', {
     const svgString = this.data.svgString;
     this.loader = new SVGLoader();
 
-    el.addEventListener('materialtextureloaded', () => {
-      // fix texture properties to correctly show texture for extruded mesh
-      const extrudedMesh = el.getObject3D('mesh');
-      if (extrudedMesh && extrudedMesh.material) {
-        const texture = extrudedMesh.material.map;
-        texture.wraps = texture.wrapt = THREE.repeatwrapping;
-        texture.repeat.set(1 / 100, 1 / 100);
-        texture.offset.set(0.1, 0.5);
-      }
+    this.stokeMaterial = new THREE.LineBasicMaterial({
+      color: '#00A5E6'
     });
-
-    if (svgString) {
-      this.extrudeFromSVG(svgString);
-      el.setAttribute('material', 'src:#grass-texture;repeat:5 5;roughness:1');
-      el.setAttribute('scale', '0.05 0.05 0.05');
-      el.setAttribute('shadow', 'cast: true; receive: true');
-    }
+    // 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 = new THREE.MeshStandardMaterial({ color: '#F3FBFB' });
-    const stokeMaterial = new THREE.LineBasicMaterial({
-      color: '#00A5E6'
-    });
+    const fillMaterial = this.material;
 
     const extrudeSettings = {
       depth: depth,
@@ -56,7 +43,7 @@ AFRAME.registerComponent('svg-extruder', {
         shapeGeometryArray.push(geometry);
 
         const linesGeometry = new THREE.EdgesGeometry(geometry);
-        const lines = new THREE.LineSegments(linesGeometry, stokeMaterial);
+        const lines = new THREE.LineSegments(linesGeometry, this.stokeMaterial);
 
         el.setObject3D('lines' + shapeIndex, lines);
         lines.name = 'lines' + shapeIndex;
@@ -95,12 +82,20 @@ AFRAME.registerComponent('svg-extruder', {
   update: function (oldData) {
     // If `oldData` is empty, then this means we're in the initialization process.
     // No need to update.
-    if (Object.keys(oldData).length === 0) { return; }
+    //if (Object.keys(oldData).length === 0) { return; }
 
+    const el = this.el;
     const svgString = this.data.svgString;
 
     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');
+      }
     }
   }
 });