diff --git a/src/editor/components/components/AddLayerPanel/createLayerFunctions.js b/src/editor/components/components/AddLayerPanel/createLayerFunctions.js index a664a90a3..0cf1475ee 100644 --- a/src/editor/components/components/AddLayerPanel/createLayerFunctions.js +++ b/src/editor/components/components/AddLayerPanel/createLayerFunctions.js @@ -157,7 +157,7 @@ export function createCustomModel() { // accepts a path for a glTF (or glb) file hosted on any publicly accessible HTTP server. // Then create entity with model from that path by using gltf-model component const modelUrl = prompt( - 'Please enter a URL to custom glTF/Glb model', + 'Please enter a URL to custom glTF/GLB model', 'https://cdn.glitch.global/690c7ea3-3f1c-434b-8b8d-3907b16de83c/Mission_Bay_school_low_poly_model_v03_draco.glb' ); if (modelUrl && modelUrl !== '') { @@ -184,6 +184,27 @@ export function createPrimitiveGeometry() { AFRAME.INSPECTOR.execute('entitycreate', definition); } +export function createImageEntity(position) { + // This component accepts a svgString and creates a new entity with geometry extruded + // from the svg and applies the default mixin material grass. + const imagePath = prompt( + 'Please enter an image path that is publicly accessible on the web and starts with https://', + `https://assets.3dstreet.app/images/signs/Sign-Speed-30kph-Kiritimati.png` + ); + if (imagePath && imagePath !== '') { + const definition = { + element: 'a-entity', + components: { + position: position ?? '0 0 0', // TODO: How to override only the height (y) value? We don't want the sign in the ground + geometry: 'primitive: plane; height: 1.5; width: 1;', + material: `src: url(${imagePath})`, + 'data-layer-name': 'Image • User Specified Path' + } + }; + AFRAME.INSPECTOR.execute('entitycreate', definition); + } +} + export function createIntersection() { const definition = { 'data-layer-name': 'Street • Intersection 90º', diff --git a/src/editor/components/components/AddLayerPanel/layersData.js b/src/editor/components/components/AddLayerPanel/layersData.js index 7055e6557..a5da632ad 100644 --- a/src/editor/components/components/AddLayerPanel/layersData.js +++ b/src/editor/components/components/AddLayerPanel/layersData.js @@ -10,7 +10,8 @@ import { create60ftRightOfWay, create80ftRightOfWay, create94ftRightOfWay, - create150ftRightOfWay + create150ftRightOfWay, + createImageEntity } from './createLayerFunctions'; export const streetLayersData = [ @@ -126,5 +127,15 @@ export const layersData = [ 'Create intersection entity. Parameters of intersection component could be changed in properties panel.', id: 6, handlerFunction: createIntersection + }, // createImageEntity + { + name: 'Place New Image Entity', + img: '', + requiresPro: true, + icon: 'ui_assets/cards/icons/gallery24.png', + description: + 'Place an image such as a sign, reference photo, custom map, etc.', + id: 7, + handlerFunction: createImageEntity } ]; diff --git a/ui_assets/cards/icons/gallery24.png b/ui_assets/cards/icons/gallery24.png new file mode 100644 index 000000000..1fca4e8aa Binary files /dev/null and b/ui_assets/cards/icons/gallery24.png differ