[epic] add new entity panel

[kfarr]

As a user creating a new 3dstreet scene, I'd like to be able to place elements from scratch without needing to import them from another application. I'd like to be able to choose between different options by scrolling and filter by different categories.

When I click the card I'd like the model to appear "in front of me" aka in front of the camera by ~5m. I'd like the model to appear on the ground (not in the ground, not floating in the air), I'd like the newly placed object / layer to be added in the scene graph, for this object / layer to be selected and indicated as such by scene widget and right-panel expanding to show newly placed object's properties. Finally as a user I'd like confirmation or celebration or satisfying animation + sound effect when object is placed.

Suggested engineering tasks to be completed:

• [x] Zade @rostyslavnahornyi - create "add new entity" panel in react app per below figma designs expanded [1] and collapsed (default) [2] ; use fake cards or stub data for a first version to get something for review by me and designer; first version logs to console when card is pressed.
• [ ] AG - function to place the new item when card is pressed?
• [ ] AG - function(s) to place layers when card is pressed? -- there may be different code for each. here are some examples: https://www.3dstreet.org/docs/development/alpha-labs/
• [ ] zade - v2 get data via similar method used by category grouping in mixin dropdown select
• [ ] zade - v3 more advanced to add thumbnail, icon, display name, etc values we could use something like this model catalog JSON format where img is a thumbnail path from assets cdn root such as "dist/img/tree_E.jpg" and dist is the model path from assets cdn root such as "dist/models/tree_E.glb"
• [ ] how to provide list of layers (such as google maps 3d tiles, map box, intersection, etc) that are supported? how to specify icon and preview image for each?

considerations:

designs: [1] figma version

[2] figma version

[Algorush]

From discord discussion.

I'd love any feedback you might have on this ticket, especially on how to get data about models, and then also ideas to best structure the function to create assets when cards are pressed.

not quite understand this question. Maybe from grouped mixin list like in right panel of Editor?

and then also ideas to best structure the function to create assets when cards are pressed.

this question is related to this?

When I click the card I'd like the model to appear "in front of me" aka in front of the camera by ~5m. I'd like the model to appear on the ground (not in the ground, not floating in the air), I'd like the newly placed object / layer to be added in the scene graph, for this object / layer to be selected and indicated as such by scene widget and right-panel expanding to show newly placed object's properties.

I think it is clear how to create this functionality in case if the selected model is located 5 cm from the camera. We can also make it rotating with some speed or view it from different angles by clicking on it and dragging the cursor. How to implement - Create object from selected mixin -> locate it in front of camera. Change mixin while selecting another model.

I'd like the model to appear on the ground (not in the ground, not floating in the air)

I suppose to make it also always on the ground when moving by the cursor or through changing position in Editor? Here are few options to implement. 1. Use phyisics/colliding lib. 2. add code to the existing object move (dragging) function to respect the elevation level. 3. Use nav-mesh - based on segments surfaces. But I don't know if navmesh will be taken into account (elevation level) when moving (dragging) an object in the Editor, I think no

[kfarr]

@Algorush

Maybe from grouped mixin list like in right panel of Editor?

Yes, that is the plan for "v2" to "get data via similar method used by category grouping in mixin dropdown select"

But that does not provide sufficient metadata such as image, display name, or function to call upon press (if placing a layer with custom behavior like google maps or intersection instead of a standard model / mixin)

Hence the suggestion for using the catalog.json format developed in citybuilderjr for "v3" to add thumbnail, icon, display name, etc model catalog JSON format where img is a thumbnail path from assets cdn root such as "dist/img/tree_E.jpg" and dist is the model path from assets cdn root such as "dist/models/tree_E.glb"

But it would take some work to adapt those scripts for 3dstreet dist repo to generate a catalog.json. Also that method doesn't support categories yet, I had an idea for this but didn't implement. What do you think?

I think it is clear how to create this functionality in case if the selected model is located 5 cm from the camera.

Yes it seems simple in theory. :) First version is click to place, then a later version can preview objects during hover state later. We can just place everything at y = 0 for the first version and then do raycaster collision to find floor later (although that's probably better done with a more generic ground snapping component)

[Algorush]

But it would take some work to adapt those scripts for 3dstreet dist repo to generate a catalog.json. Also that method doesn't support categories yet, I had an idea for this but didn't implement. What do you think?

To get started, we can simply add a category parameter to all objects. And add the ability to change the category

[Algorush]

I made the first version of selecting and adding objects to the scene, as well as previewing the object in front of the camera. I made the scale smaller for the buildings, but some elements, such as lamps, do not fit the entire screen. Therefore, I think it is better to place a preview of the object on the scene itself. Next I describe what it looks like.

I also think it would be a good idea to place the object in the center of the selected segment in the editor (only if a segment-parent entity is selected? or it could be any object?), including in preview mode. That is, the user selects a segment/object (can filter it by parameters) and a preview of the object is placed in the center of the selected object; when user click on the object card, it is created in this place. I'll make it also for review in separate branch, it's pretty easy to do: https://github.com/3DStreet/3dstreet-editor/pull/418

[Algorush]

I hope it's ok that I changed the code a little in the component? And added logic to load Objects data from the mixin? Let this be my suggestion simply, you can remove this code except createEntity, previewEntity, and hover handlers. Or I can continue to make logic for Layers too, have some ideas how to separate createLayer logic from createEntity.

About filling "Layers: Streets & Intersections". What should be here? Cards with add a new street like in Alphalabs, add an intersection element? This also includes - mapbox, 3dtiles?

[Algorush]

Idea about Layer cards. It will be good to have a simple UI form generator for entering data needed to create specific layers. With fields, came from card parameters. For example, for create mapbox layer we need lat, long, accessToken, zoom, etc. For new street we need streetmixURL. And we could have dataCards for these layers:

layer-cards: {
  layer-name: mapbox,
  data-lat: { type: number, defaultValue:122.435235 },
  data-long: { type: number, defaultValue: 37.784553 },
  data-accessToken: ...,
  data-zoom: { type: number, defaultValue: 18 }
},
{
  layer-name: streetmix-street,
  data-url: { type: string, defaultValue: https://streetmix.net/kfarr/128/owens-st}
},

So we need a form to enter these data to create Layer. It could be simple react form-generator component, that recieve fields description and dynamicly generate a form. Or maybe the form is not needed, and we can simply open the right panel with the corresponding component for entering data when creating a new layer/street/etc.

[Algorush]

I have a suggestion to place all new objects (that came from mixins) as children of a new entity custom-group (className for example), which is a child of the segment. It is for more convenient, so that they do not clutter the scene tree. I also added a new data-elevation-posY attribute to aframe-streetmix-parsers.js for each segment entity in this 3DStreet PR. This will allow to place new objects at the elevation level of segment. I have made adding new objetcs with this approach in separate branch. After testing in my localhost I think it is much convenient now, that objects always adding as a child of one entity with custom-group class. Regardless of which segment entity is selected, the objects are added to custom-group entity of this segment. Also, all new adding objects now respect the elevation level of segment

[Algorush]

I can also make it so that all new objects are added as direct children of the segment, regardless of which segment object is selected. Or can also make it possible to select a group in the sceneGraph to which new objects will be added. I also have an idea about splitting the edit mode into two parts:

• editing segments (road, sidewalk, signs). In this mode, other objects (that is above the surface) are not available for selection.
• editing segment objects - everything that is above the surface (pedestrians, cars, objects, etc.). In this mode, on the contrary, segment entities are not available for editing.

This approach will make editing the scene more convenient, since now I can often confuse and accidentally move the sidewalk instead of the pedestrian, for example. It would also be convenient to more explicitly display information about the currently selected entity somewhere on the editor screen. Because if I hide the right panel, it is not always obvious what is currently selected.

[kfarr]

https://github.com/3DStreet/3dstreet-editor/pull/428