From dd3a2fb1f5b4bf6f962d8a777cb9d2df77e80215 Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Tue, 10 Dec 2024 16:11:22 -0800
Subject: [PATCH] adding custom models and images

---
 .../custom-models-and-images.mdx              | 93 +++++++++++++++++++
 docs/3dstreet-editor/keyboard-shortcuts.md    |  2 +-
 .../mouse-and-touch-controls.md               |  2 +-
 3 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 docs/3dstreet-editor/custom-models-and-images.mdx

diff --git a/docs/3dstreet-editor/custom-models-and-images.mdx b/docs/3dstreet-editor/custom-models-and-images.mdx
new file mode 100644
index 00000000..d64c4399
--- /dev/null
+++ b/docs/3dstreet-editor/custom-models-and-images.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_position: 6
+---
+import MuxPlayer from '@mux/mux-player-react';
+
+# Adding Custom Models and Images to 3DStreet Scenes
+
+## Importing 3D Models
+
+3DStreet supports importing custom 3D models in glTF / GLB format to enhance your street scenes with unique objects and elements.
+
+<MuxPlayer
+    streamType="on-demand"
+    playbackId="xf7ytm7VAP9QTLtyLL3Cs01Jul7rHHM26"
+    primaryColor="#FFFFFF"
+    secondaryColor="#000000"
+    accentColor="#653CB0"
+/>
+
+### Prerequisites
+* GLB format 3D model files
+* Public URL access to your hosted models, usually via web hosting service (e.g., Glitch.com)
+
+### Validation and Hosting
+
+Before importing, double check that your file is compatible with three.js by validating your GLB file at [gltf-viewer.donmccurdy.com](https://gltf-viewer.donmccurdy.com/). If your model is not compatible, you may need to convert it to a compatible format.
+
+To host your file you will need a public URL to access it. You can use a web hosting service like Glitch.com to host your files:
+
+* Create a [Glitch.com](https://glitch.com/) account
+* Create a new project
+* Upload your GLB file to the Assets section
+* Copy the public URL for your model
+
+### Adding Models to Your Scene
+
+* In 3DStreet Editor, open or create a scene
+* Click "Custom Layers"
+* Select "GLTF model from URL"
+* Paste your model's public URL
+* Click OK to add the model
+
+### Adjusting Your Model
+
+Use the Properties panel to modify:
+* Scale (adjust size on different axes)
+* Position (move model within the scene)
+* Rotation (orient model as needed)
+
+
+## Importing Images
+
+3DStreet allows you to import custom images to add signage, existing conditions photos, maps, and other visual elements to your scenes.
+
+<MuxPlayer
+    streamType="on-demand"
+    playbackId="7eUdcuA6vIAJmdooxO02va1lzdd52HqES"
+    primaryColor="#FFFFFF"
+    secondaryColor="#000000"
+    accentColor="#653CB0"
+/>
+
+### Prerequisites
+* Image files in JPG, PNG, or WEBP format
+* Public URL for your images, usually via a web hosting service (e.g., Glitch.com)
+
+
+### Adding Images
+Host your image:
+
+* Upload to [Glitch.com](https://glitch.com) Assets
+* Copy the public URL
+
+In 3DStreet Editor:
+
+* Click "Custom Layers"
+* Select "Place New Image Entity"
+* Paste your image URL
+* Click OK
+
+### Positioning and Adjusting
+
+* Use Transform Controls for position
+* Rotate images to face desired direction
+* Adjust scale in Properties panel
+* Consider mounting images on existing scene elements
+
+### Best Practices
+
+* Validate file formats before importing
+* Scale elements appropriately for scene realism
+* Position near relevant street features
+* Use double-click to zoom for precise placement
\ No newline at end of file
diff --git a/docs/3dstreet-editor/keyboard-shortcuts.md b/docs/3dstreet-editor/keyboard-shortcuts.md
index f66c1975..dd37bd36 100644
--- a/docs/3dstreet-editor/keyboard-shortcuts.md
+++ b/docs/3dstreet-editor/keyboard-shortcuts.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # Keyboard Shortcuts
diff --git a/docs/3dstreet-editor/mouse-and-touch-controls.md b/docs/3dstreet-editor/mouse-and-touch-controls.md
index 75cee51d..70c5b510 100644
--- a/docs/3dstreet-editor/mouse-and-touch-controls.md
+++ b/docs/3dstreet-editor/mouse-and-touch-controls.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Mouse and Touch Controls