Merge pull request #775 from 3DStreet/new-layers

create new "Streets" group in add entity panel

src/assets.js

@@ -70,14 +70,14 @@ function buildAssetHTML(assetUrl, categories) {
         <a-mixin shadow id="a_char8" gltf-model="#character8walk" animation-mixer></a-mixin>
       `,
     vehicles: `
-        <!-- vehicles -->
-        <a-asset-item id="magic-carpet-glb" src="${assetUrl}sets/magic-carpet/gltf-exports/draco/magic-carpet.glb"></a-asset-item>
-        <a-mixin shadow id="Character_1_M" gltf-part="src: #magic-carpet-glb; part: Character_1_M"></a-mixin>
-        <a-mixin shadow id="magic-carpet" gltf-part="src: #magic-carpet-glb; part: magic-carpet"></a-mixin>
         <!-- micro mobility vehicles -->
         <a-asset-item id="microMobilityDevices" src="${assetUrl}sets/micro-mobility-devices/gltf-exports/draco/micro-mobility-devices_v01.glb"></a-asset-item>
         <a-mixin shadow id="Bicycle_1" gltf-part="src: #microMobilityDevices; part: Bicycle_1"></a-mixin>
         <a-mixin shadow id="ElectricScooter_1" gltf-part="src: #microMobilityDevices; part: ElectricScooter_1"></a-mixin>
+        <!-- fantasy vehicles -->
+        <a-asset-item id="magic-carpet-glb" src="${assetUrl}sets/magic-carpet/gltf-exports/draco/magic-carpet.glb"></a-asset-item>
+        <a-mixin shadow id="Character_1_M" gltf-part="src: #magic-carpet-glb; part: Character_1_M"></a-mixin>
+        <a-mixin shadow id="magic-carpet" gltf-part="src: #magic-carpet-glb; part: magic-carpet"></a-mixin>
       `,
     'vehicles-rigged': `
         <!-- vehicles rigged -->

src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx

@@ -13,7 +13,7 @@ import mixinCatalog from '../../../../catalog.json';
 import posthog from 'posthog-js';
 import Events from '../../../lib/Events';
 import pickPointOnGroundPlane from '../../../lib/pick-point-on-ground-plane';
-import { layersData } from './layersData.js';
+import { layersData, streetLayersData } from './layersData.js';
 import { LayersOptions } from './LayersOptions.js';
 
 // Create an empty image
@@ -293,6 +293,8 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   const selectedCards = useMemo(() => {
     if (selectedOption === 'Pro Layers') {
       return layersData;
+    } else if (selectedOption === 'Street Layers') {
+      return streetLayersData;
     } else {
       return getSelectedMixinCards(groupedMixins, selectedOption);
     }
@@ -391,7 +393,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
       if (transferredData.mixinId) {
         createEntityOnPosition(transferredData.mixinId, position);
       } else if (transferredData.layerCardId) {
-        layersData
+        selectedCards
           .find((card) => card.id === transferredData.layerCardId)
           ?.handlerFunction(position);
       }

src/editor/components/components/AddLayerPanel/LayersOptions.js

@@ -1,50 +1,50 @@
 const LayersOptions = [
   {
-    value: 'Models: Personal Vehicles',
-    label: 'Models: Personal Vehicles',
-    mixinGroups: ['vehicles', 'vehicles-rigged'],
-    onClick: () => console.log('Models: Personal Vehicles')
+    value: 'Dividers & Traffic Control',
+    label: '🚧 Dividers & Traffic Control',
+    mixinGroups: ['dividers'],
+    onClick: () => {}
   },
   {
-    value: 'Pro Layers',
-    label: 'Pro Layers',
-    onClick: () => console.log('Layers: Streets & Intersections')
+    value: 'Street Layers',
+    label: '🛣️ Street Layers',
+    onClick: () => {}
   },
   {
-    value: 'Models: Transit Vehicles',
-    label: 'Models: Transit Vehicles',
-    mixinGroups: ['vehicles-transit'],
-    onClick: () => console.log('Models: Transit Vehicles')
+    value: 'Pro Layers',
+    label: '🌏 Pro Layers',
+    onClick: () => {}
   },
   {
-    value: 'Models: Utility Vehicles',
-    label: 'Models: Utility Vehicles',
-    mixinGroups: ['vehicles-rigged'],
-    onClick: () => console.log('Models: Utility Vehicles')
+    value: 'Motor Vehicles',
+    label: '🚗 Motor Vehicles',
+    mixinGroups: ['vehicles-rigged', 'vehicles-transit'],
+    onClick: () => {}
   },
   {
-    value: 'Models: Characters',
-    label: 'Models: Characters',
-    mixinGroups: ['people', 'people-rigged'],
-    onClick: () => console.log('Models: Characters')
+    value: 'People Power Vehicles',
+    label: '🚲 People Power Vehicles',
+    mixinGroups: ['vehicles', 'cyclists'],
+    onClick: () => {}
   },
   {
-    value: 'Models: Street Props',
-    label: 'Models: Street Props',
-    mixinGroups: ['sidewalk-props', 'intersection-props'],
-    onClick: () => console.log('Models: Street Props')
+    value: 'Characters',
+    label: '🚶 Characters',
+    mixinGroups: ['people'],
+    onClick: () => {}
   },
   {
-    value: 'Models: Dividers & Traffic Control',
-    label: 'Models: Dividers & Traffic Control',
-    mixinGroups: ['dividers'],
-    onClick: () => console.log('Models: dividers')
+    value: 'Sidewalk Props',
+    label: '🌳 Sidewalk Props',
+    mixinGroups: ['sidewalk-props', 'intersection-props'],
+    onClick: () => {}
   },
+
   {
-    value: 'Models: Buildings',
-    label: 'Models: Buildings',
+    value: 'Buildings',
+    label: '🏠 Buildings',
     mixinGroups: ['buildings'],
-    onClick: () => console.log('Models: Buildings')
+    onClick: () => {}
   }
 ];
 

src/editor/components/components/AddLayerPanel/createLayerFunctions.js

@@ -1,7 +1,7 @@
 import Events from '../../../lib/Events';
 import { loadScript, roundCoord } from '../../../../../src/utils.js';
 
-function createSvgExtrudedEntity() {
+export function createSvgExtrudedEntity() {
   // 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(
@@ -31,7 +31,7 @@ function createSvgExtrudedEntity() {
   }
 }
 
-function createMapbox() {
+export function createMapbox() {
   // This component accepts a long / lat and renders a plane with dimensions that
   // (should be) at a correct scale.
   const geoLayer = document.getElementById('reference-layers');
@@ -55,13 +55,15 @@ function createMapbox() {
   Events.emit('entitycreated', geoLayer);
 }
 
-function createStreetmixStreet(position) {
+export function createStreetmixStreet(position, streetmixURL, hideBuildings) {
   // This code snippet allows the creation of an additional Streetmix street
   // in your 3DStreet scene without replacing any existing streets.
-  const streetmixURL = prompt(
-    'Please enter a Streetmix URL',
-    'https://streetmix.net/kfarr/3/3dstreet-demo-street'
-  );
+  if (streetmixURL === undefined) {
+    streetmixURL = prompt(
+      'Please enter a Streetmix URL',
+      'https://streetmix.net/kfarr/3/3dstreet-demo-street'
+    );
+  }
   if (streetmixURL && streetmixURL !== '') {
     const newEl = document.createElement('a-entity');
     newEl.setAttribute('id', streetmixURL);
@@ -74,7 +76,7 @@ function createStreetmixStreet(position) {
 
     newEl.setAttribute(
       'streetmix-loader',
-      `streetmixStreetURL: ${streetmixURL}`
+      `streetmixStreetURL: ${streetmixURL}; showBuildings: ${!hideBuildings}`
     );
     const parentEl = document.querySelector('#street-container');
     parentEl.appendChild(newEl);
@@ -83,7 +85,43 @@ function createStreetmixStreet(position) {
   }
 }
 
-function create3DTiles() {
+export function create40ftRightOfWay(position) {
+  createStreetmixStreet(
+    position,
+    'https://streetmix.net/3dstreetapp/1/40ft-right-of-way-24ft-road-width',
+    true
+  );
+}
+export function create60ftRightOfWay(position) {
+  createStreetmixStreet(
+    position,
+    'https://streetmix.net/3dstreetapp/2/60ft-right-of-way-36ft-road-width',
+    true
+  );
+}
+export function create80ftRightOfWay(position) {
+  createStreetmixStreet(
+    position,
+    'https://streetmix.net/3dstreetapp/3/80ft-right-of-way-56ft-road-width',
+    true
+  );
+}
+export function create94ftRightOfWay(position) {
+  createStreetmixStreet(
+    position,
+    'https://streetmix.net/3dstreetapp/4/94ft-right-of-way-70ft-road-width',
+    true
+  );
+}
+export function create150ftRightOfWay(position) {
+  createStreetmixStreet(
+    position,
+    'https://streetmix.net/3dstreetapp/5/150ft-right-of-way-124ft-road-width',
+    true
+  );
+}
+
+export function create3DTiles() {
   // This code snippet adds an entity to load and display 3d tiles from
   // Google Maps Tiles API 3D Tiles endpoint. This will break your scene
   // and you cannot save it yet, so beware before testing.
@@ -126,7 +164,7 @@ function create3DTiles() {
   }
 }
 
-function createCustomModel() {
+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(
@@ -151,7 +189,7 @@ function createCustomModel() {
   }
 }
 
-function createPrimitiveGeometry() {
+export function createPrimitiveGeometry() {
   const newEl = document.createElement('a-entity');
   newEl.setAttribute('geometry', 'primitive: circle; radius: 50;');
   newEl.setAttribute('rotation', '-90 -90 0');
@@ -172,7 +210,7 @@ function createPrimitiveGeometry() {
   parentEl.appendChild(newEl);
 }
 
-function createIntersection() {
+export function createIntersection() {
   const newEl = document.createElement('a-entity');
   newEl.setAttribute('intersection', '');
   newEl.setAttribute('data-layer-name', 'Street • Intersection 90º');
@@ -189,7 +227,7 @@ function createIntersection() {
   parentEl.appendChild(newEl);
 }
 
-function createSplatObject() {
+export function createSplatObject() {
   // accepts a path for a .splat file hosted on any publicly accessible HTTP server.
   // Then create entity with model from that path by using gaussian_splatting component
   const modelUrl = prompt(
@@ -216,14 +254,3 @@ function createSplatObject() {
     parentEl.appendChild(newEl);
   }
 }
-
-export {
-  createSvgExtrudedEntity,
-  createMapbox,
-  createStreetmixStreet,
-  create3DTiles,
-  createCustomModel,
-  createPrimitiveGeometry,
-  createIntersection,
-  createSplatObject
-};