Editing docs

docs/editing.md

@@ -0,0 +1,59 @@
+---
+sidebar_label: 'Editing'
+sidebar_position: 3
+---
+
+# Editing
+3DStreet has powerful editing capabilities. You can move, rotate, and resize objects, as well as change their type and add advanced properties. You can also duplicate, add, and delete objects.
+
+## Editing Object Properties
+There are many properties you can edit for any object in the scene. Some properties can be edited through the toolbar, and some require you to edit the properties panel.
+
+### Using the Toolbar to Change Position and Rotation
+The quickest way to move and rotate objects in your scene is using the toolbar and arrow controls.
+
+#### Move Tool with Arrows (1 Axis)
+
+To adjust the position of an object, click the **Move Tool** icon, click on an object to select it (if not already), then click and drag on the red, green or blue arrows to move it.
+
+This is the recommended way to move objects. You can move an object in a particular direction by clicking a specific arrow and dragging it. Press the `o` keyboard shortcut to toggle the axis arrows' alignment between object and world space.
+
+![GIF of moving an object using the arrows](/img/docs/editing/arrowmove.gif)
+
+#### Move Tool with Squares (2 Axes)
+
+This method allows for more range of movement but can be harder to control. Click and drag the squares to move the object in any direction along 2 axes.
+
+![GIF of moving an object using free move](/img/docs/editing/freemove.gif)
+
+#### Rotate Tool
+
+For rotation, click the **Rotate Tool** icon, click on an object to select it (if not already), then click and drag on the green arc around the object to rotate about the Y axis (yaw).
+
+![GIF of rotating an object.](/img/docs/editing/rotate.gif)
+
+### Using the Properties Panel to Change Position, Rotation, and More
+The properties panel lists all properties you can edit for any object in the scene. This includes position and rotation, but also includes many more properties about objects. You can edit an object's properties by clicking on an object to select it (if not already), then open the right-hand properties panel (if not opened already).
+
+#### Position
+
+![GIF of moving an object.](/img/docs/editing/moveproperties.gif)
+
+#### Rotation
+
+![GIF of rotating an object.](/img/docs/editing/rotateproperties.gif)
+
+#### Size
+
+The size of an object can be edited in the properties panel using the scale properties
+![GIF of resizing an object.](/img/docs/editing/scale.gif)
+
+#### Change Object
+
+The type of object can be changed using the model selector in the properties panel. After clicking in the Model field you can start typing to search for a new model.
+
+![GIF of changing an object.](/img/docs/editing/changetype.gif)
+
+#### Advanced Properties
+
+To edit additional properties on an object in the right-hand properties panel, scroll down and click "Show Advanced." Advanced properties may not work as expected and may cause unwanted issues with your scene, so you may want to save a copy of your scene before playing around with these.

docs/navigation.md

@@ -0,0 +1,49 @@
+---
+sidebar_label: 'Navigation'
+sidebar_position: 2
+---
+
+# Navigation
+
+### 3DStreet Editor
+
+#### Hand Icon
+
+The hand icon allows you to click and drag to move around the scene without accidentally selecting an object.
+
+![Screenshot of the 3DStreet Editor with the hand icon cursor.](/img/docs/navigation/3dstreet-editor-hand.gif)
+
+#### Panning
+
+Click and drag to move around the scene.
+
+![Animated gif of a user panning a street scene using the 3DStreet Editor.](/img/docs/navigation/pan.gif)
+
+#### Rotation
+
+Right click and drag to rotate while staying in place. (Hold `SHIFT` and click and drag if you have a trackpad.)
+
+![Animated gif of a user rotating a street scene using the 3DStreet Editor.](/img/docs/navigation/rotate.gif)
+
+#### Zooming In and Out
+
+With scroll wheel on your mouse move the wheel up and down. Or with trackpad use two fingers and move towards each other for a zoom in and move away from each other for zoom out.
+
+![Animated gif of a user zooming in and out of a street scene using the 3DStreet Editor.](/img/docs/navigation/zoom.gif)
+
+#### Double Click
+Double click on an entity in the scene graph or in the scene to fly the camera to that location.
+
+![Animated gif of a user double clicking on an entity to fly the camera to that location using the 3DStreet Editor.](/img/docs/navigation/double-click.gif)
+:::tip
+**Lost? Double Click:** If you get stuck or the camera gets lost in a strange position, try double clicking on an object to reset the camera. Double clicking an object is also a great way to quickly zoom into a specific area with more precision than using the scroll wheel.
+<br/>
+**Tell a Story:** Double clicking to zoom to an entity is a great tool for presentations with stakeholders -- focus attention on key project areas from any prior camera position in a live presentation, or use a screen capture tool to record video animations. 
+:::
+
+### Viewer
+Like “Streetview” this is how you can get a real-life perspective of your street scene from the ground level
+
+To move use arrows  / wasd or click once on a point on the ground and you will teleport to that location. Even fly around if you’re feeling adventurous - (requires holding left click as a way to move around. maybe change that to just point in a direction?)
+
+![Animated gif of a user navigating a street scene using the 3DStreet Viewer.](/img/docs/navigation/viewer.gif)