-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #478 from 3DStreet/mapbox-and-custom-svg-epic
[epic] Mapbox and custom svg 0.4.8
- Loading branch information
Showing
10 changed files
with
3,340 additions
and
107 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,9 +10,6 @@ | |
| <!-- mapbox --> | ||
| <script src="./src/lib/aframe-mapbox-component.min.js"></script> | ||
|
|
||
| <!-- save / load --> | ||
| <script src="./src/json-utils.js"></script> | ||
|
|
||
| <!-- vr teleport controls --> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-blink-controls.min.js"></script> | ||
|
|
||
|
|
@@ -68,7 +65,7 @@ | |
| <div class="right-fixed"> | ||
| <ul class="right-menu"> | ||
| <li onclick="buttonScreenshotTock()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img src="ui_assets/camera-icon.svg"> </a></li> | ||
| <li onclick="inputStreetmix()"> <a class="load" href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li> | ||
| <li onclick="STREET.utils.inputStreetmix()"> <a class="load" href="#"> <span> Load Streetmix URL </span> <img src="ui_assets/streetmix-logo.svg"> </a></li> | ||
| <!-- <li onclick="inputJSON()"> <a class="load" href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li> --> | ||
| <li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span> <img src="ui_assets/upload-icon.svg"></label></a></li> | ||
| </ul> | ||
|
|
@@ -123,7 +120,7 @@ | |
| <script> | ||
|
|
||
| document.getElementById('inputfile') | ||
| .addEventListener('change', fileJSON); | ||
| .addEventListener('change', STREET.utils.fileJSON); | ||
|
|
||
| function buttonScreenshotTock() { | ||
| const screenshotEl = document.getElementById('screenshot'); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| /* global AFRAME */ | ||
| var { SVGLoader } = require('../lib/SVGLoader.js'); | ||
|
|
||
| AFRAME.registerComponent('svg-extruder', { | ||
| schema: { | ||
| svgString: { type: 'string' }, | ||
| depth: { type: 'number', default: 4 } | ||
| }, | ||
| init: function () { | ||
| const el = this.el; | ||
| 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); | ||
| } | ||
| }); | ||
|
|
||
| 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'); | ||
| } | ||
| }, | ||
| 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 extrudeSettings = { | ||
| depth: depth, | ||
| bevelEnabled: false | ||
| }; | ||
|
|
||
| // svgGroup.scale.y *= -1; | ||
| let shapeIndex = 0; | ||
|
|
||
| const shapeGeometryArray = []; | ||
|
|
||
| svgData.paths.forEach((path) => { | ||
| const shapes = SVGLoader.createShapes(path); | ||
|
|
||
| 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, 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.computeVertexNormals(); | ||
|
|
||
| // 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; } | ||
|
|
||
| const svgString = this.data.svgString; | ||
|
|
||
| if (svgString) { | ||
| this.extrudeFromSVG(svgString); | ||
| } | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.