diff --git a/src/editor/components/components/AddLayerPanel/createLayerFunctions.js b/src/editor/components/components/AddLayerPanel/createLayerFunctions.js index a664a90a3..a08a40a94 100644 --- a/src/editor/components/components/AddLayerPanel/createLayerFunctions.js +++ b/src/editor/components/components/AddLayerPanel/createLayerFunctions.js @@ -1,6 +1,6 @@ import { loadScript, roundCoord } from '../../../../../src/utils.js'; -export function createSvgExtrudedEntity() { +export function createSvgExtrudedEntity(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 svgString = prompt( @@ -17,6 +17,7 @@ export function createSvgExtrudedEntity() { const definition = { element: 'a-entity', components: { + position: position ?? '0 0 0', 'svg-extruder': `svgString: ${svgString}`, 'data-layer-name': 'SVG Path • My Custom Path' } @@ -153,17 +154,18 @@ export function create3DTiles() { } } -export function createCustomModel() { +export function createCustomModel(position) { // 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 !== '') { const definition = { class: 'custom-model', components: { + position: position ?? '0 0 0', 'gltf-model': `url(${modelUrl})`, 'data-layer-name': 'glTF Model • My Custom Object' } @@ -172,11 +174,12 @@ export function createCustomModel() { } } -export function createPrimitiveGeometry() { +export function createPrimitiveGeometry(position) { const definition = { - 'data-layer-name': 'Plane Geometry • Traffic Circle Asphalt', + 'data-layer-name': 'Geometry • Traffic Circle Asphalt', components: { - geometry: 'primitive: circle; radius: 50;', + position: position ?? '0 0 0', + geometry: 'primitive: circle; radius: 15;', rotation: '-90 -90 0', material: 'src: #asphalt-texture; repeat: 5 5;' } @@ -184,10 +187,32 @@ export function createPrimitiveGeometry() { AFRAME.INSPECTOR.execute('entitycreate', definition); } -export function createIntersection() { +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(position) { const definition = { 'data-layer-name': 'Street • Intersection 90º', components: { + position: position ?? '0 0 0', intersection: '', rotation: '-90 -90 0' } 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