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

fix rotation and other issues for svg-extruder

src/assets.js

@@ -186,13 +186,10 @@ function buildAssetHTML (assetUrl, categories) {
       `,
     'vehicles-transit': `
         <!-- vehicles-transit -->
-        <a-asset-item id="trammodel" src="${assetUrl}sets/light-rail-vehicle/gltf-exports/draco/light-rail-vehicle-v02.glb"></a-asset-item>
-        <a-asset-item id="trolleymodel" src="${assetUrl}objects/godarvilletram.gltf"></a-asset-item>
-        <a-asset-item id="xd40" src="${assetUrl}sets/flyer-bus/gltf-exports/draco/new-flyer-bus.glb"></a-asset-item>
-        <a-mixin shadow id="bus" anisotropy gltf-model="#xd40"></a-mixin>
-        <a-mixin shadow id="tram" anisotropy gltf-model="#trammodel"></a-mixin>
-        <a-mixin shadow id="trolley" gltf-model="#trolleymodel"></a-mixin>
-      `,
+        <a-mixin shadow id="bus" anisotropy gltf-model="url(${assetUrl}sets/flyer-bus/gltf-exports/draco/new-flyer-bus.glb)"></a-mixin>
+        <a-mixin shadow id="tram" anisotropy gltf-model="url(${assetUrl}sets/light-rail-vehicle/gltf-exports/draco/light-rail-vehicle-v02.glb)"></a-mixin>
+        <a-mixin shadow id="trolley" gltf-model="url(${assetUrl}sets/sanfrancisco-cablecar/gltf-exports/draco/sanfrancisco-cablecar_v01.glb)"></a-mixin>
+        `,
     dividers: `
         <!-- dividers -->
         <a-asset-item id="dividers" src="${assetUrl}sets/dividers/gltf-exports/draco/dividers.glb"></a-asset-item>        

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) => {
@@ -41,60 +37,44 @@ AFRAME.registerComponent('svg-extruder', {
       shapes.forEach((shape) => {
         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.
     // 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');
+        el.setAttribute('material', 'src:#grass-texture;roughness:1;repeat: 0.01 0.01');
       }
     }
   }