Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ image: ./images/2025-02-06/hotwheels-to-3d.webp

![A split image showing a physical toy car on the left and its 3D model counterpart in a street scene on the right](./images/2025-02-06/hotwheels-to-3d.webp)

:::info

**May 2026 Update:** The hosting and import steps in this post (OptimizeGLB.com + paste-URL) are no longer required. 3DStreet now has a built-in custom asset upload system: drag your GLB straight into the editor and it is automatically optimized, stored in your account, and placed in the scene. The AI generation workflow below still applies — just skip steps 4 and 5 and drag-and-drop the downloaded GLB instead. **[See the updated docs on adding custom models](/docs/3dstreet-editor/custom-models-and-images)**.

:::

Have you ever found yourself designing a street scene and wishing you had that perfect 3D model to bring your vision to life? Whether it's a unique piece of street furniture, a local landmark, or even a toy car, traditional 3D modeling can be time-consuming and requires specialized skills. But what if you could turn any object into a 3D model with just a couple of photos and some AI magic? Let's explore how to do exactly that!

<!-- truncate -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import MuxPlayer from '@mux/mux-player-react';

# Creating AR Scenes with Historic Imagery and 3DStreet's Viewer Mode

:::info

**May 2026 Update:** The image hosting step in this post (uploading to GitHub Pages or another web host) is no longer required. 3DStreet now supports built-in custom image upload — drag your panoramic or historic image directly into the editor and it is stored in your account automatically. The rest of the AR workflow below still applies. **[See the updated docs on adding custom images](/docs/3dstreet-editor/custom-models-and-images#uploading-custom-images)**.

:::

<div style={{float: 'right', width: '50%', maxWidth: '300px', marginLeft: '20px', marginBottom: '20px'}}>
<MuxPlayer
streamType="on-demand"
Expand Down
6 changes: 2 additions & 4 deletions blog/2026-02-14-product-update-ai-video-gallery-and-more.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,12 @@ Video generation requires a source image to use as the first frame. Upload your

<iframe style={{aspectRatio: "16/9", width: "100%"}} src="https://www.youtube.com/embed/LE59IH1Qk-A?si=CuenTTjDmscc9E61" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## AI Generator for Images: Modify, Create, Inpaint, and Outpaint
## AI Generator for Images: Modify and Create

In addition to video, access all our image editing tools in one place with the new <a href="https://3dstreet.app/generator">3DStreet AI Generator app</a>. You can now:

* [**Modify from Input Image**](https://3dstreet.app/generator/#modify) -- Upload your own image or select an image from your gallery as an input, then re-render the image while applying stylistic, editorial, geometrical, rendering, or other modifications using state of the art frontier image models from Google and other major providers.
* [**Create from Prompt**](https://3dstreet.app/generator/#create) -- Generate a new image from a text prompt without a source image.
* [**Inpaint**](https://3dstreet.app/generator/#inpaint) -- Select a region of an input image from your gallery or uploaded and re-render just that area with a new prompt. Perfect for swapping out details or fixing specific parts of a rendering.
* [**Outpaint**](https://3dstreet.app/generator/#outpaint) -- Extend the boundaries of a generated image beyond the original frame, creating wider panoramic views of your street designs.
* **Edit and iterate** -- Use the gallery to experiment with different styles and prompts on the same scene or input file to learn how they affect the final output

## Cloud Gallery with Cross-Device Sync
Expand Down Expand Up @@ -84,7 +82,7 @@ Thanks to Mike and the StreetPlan team for their support and help to better conn

## Drag and Drop 3D Models

You can now drag and drop glTF/GLB files directly into the 3DStreet viewport to import custom 3D models. No need to go through menus -- just drop your file and place it in the scene. This can be handy for quick visualizations, however drag-and-drop models are only available during the initial session and will not be saved when you reload the scene. If you'd like your GLB image to be able to be reloaded in future sessions you'll need to use a third-party storage service. [Here's a quick video showing what you can make with this feature](https://www.youtube.com/watch?v=c9itxUUtQGE).
You can now drag and drop glTF/GLB files directly into the 3DStreet viewport to import custom 3D models. No need to go through menus -- just drop your file and place it in the scene. [Here's a quick video showing what you can make with this feature](https://www.youtube.com/watch?v=c9itxUUtQGE).

## Streetmix Schema 33 with Elevation

Expand Down
95 changes: 19 additions & 76 deletions docs/3dstreet-editor/custom-models-and-images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,91 +3,34 @@ sidebar_position: 6
---
import MuxPlayer from '@mux/mux-player-react';

# Adding Custom Models and Images to 3DStreet Scenes
# Adding Custom Models and Images to a Scene

## Importing 3D Models
Need a model or image that isn't in the built-in library? Maybe you have a specific local landmark, a custom sign, a photo or map of existing conditions, or need a one-off prop? Drag the file from your computer straight into 3DStreet and it shows up in your scene.

3DStreet supports importing custom 3D models in glTF / GLB format to enhance your street scenes with unique objects and elements.
## Drag-and-drop into the editor

<MuxPlayer
streamType="on-demand"
playbackId="xf7ytm7VAP9QTLtyLL3Cs01Jul7rHHM26"
primaryColor="#FFFFFF"
secondaryColor="#000000"
accentColor="#653CB0"
/>
1. Open a scene in the [3DStreet Editor](https://3dstreet.app/).
2. Drag a file from your computer onto the viewport — drop it where you want it placed. Supported formats: `.glb` for 3D models, `.jpg` / `.png` / `.webp` for images.
3. The file is uploaded to your account and dropped into the scene at the cursor.
4. Use the right-hand Properties panel to fine-tune scale, position, and rotation.

### Prerequisites
* GLB format 3D model files
* Public URL access to your hosted models, usually via web hosting service (e.g., Glitch.com)
## Reusing your assets

### Validation and Hosting
Every file you upload lands in the **Assets panel** on the left side of the editor, alongside the built-in library. From there you can drag the same asset into any scene as many times as you want, or into other scenes in your account — no need to re-upload.

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.
The Assets panel is part of a larger system that handles storage, optimization, attribution, and asset management across your account. **[Learn more about the Asset System](/docs/key-features/asset-system)**.

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:
## Alternative: adding by URL

* 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
If your model or image is already hosted on a publicly accessible URL, you can reference it directly without uploading:

### Adding Models to Your Scene
1. Click **Add Layer** → **Custom Layers** tab.
2. Choose **GLTF Model from URL** or **Place New Image Entity**.
3. Paste the public URL and click OK.

* 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
URL-referenced assets do not appear in your Assets panel, don't count against your quota, and don't go through 3DStreet's optimization pipeline. For most users, drag-and-drop upload is the better option.

### Adjusting Your Model
## Tips

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
* If a model isn't rendering as you expect, drop the `.glb` into [gltf-viewer.donmccurdy.com](https://gltf-viewer.donmccurdy.com/) — it uses the same three.js loader 3DStreet does, so what shows up there is what you'll see in your scene.
* Use the duplicate shortcut (`d`) to repeat the same asset in multiple places without re-dragging.
6 changes: 3 additions & 3 deletions docs/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ Contributors to 3DStreet can come from various backgrounds, such as 3D artists,

Some possible ways to become a contributor are:
* Application Development: People proficient with JavaScript, A-Frame / Three.js / React etc can help with the development and optimization of 3DStreet. See our primary repository [3DStreet/3dstreet](https://github.com/3DStreet/3dstreet/) for the open-source 3DStreet editor codebase.
* 3D modeling: If you're skilled in 3D modeling software (e.g., Blender, 3ds Max, Maya, SketchUp), you can create and contribute 3D models of buildings, street elements, or other urban objects. [See 3d modeling guide on `3dstreet-assets-source` README.](https://github.com/3DStreet/3dstreet-assets-source#readme)
* GIS and mapping: If you have experience with geographic information systems (GIS), you can help improve the geospatial accuracy and detail of the project by incorporating real-world map data or satellite imagery. We have 3dtiles and satellite map examples but they're broken at the moment sorry.
* Documentation and tutorials: Writing documentation, creating tutorials, or making video guides can help newcomers learn how to contribute to the project and use the tools more effectively. You're reading the docs now. Peek behind the scenes with our open-source [docusaurus-based](https://docusaurus.io/) docs repo here: https://github.com/3DStreet/3dstreet-docs
* 3D modeling: If you're skilled in 3D modeling software (e.g., Blender, 3ds Max, Maya, SketchUp), you can create and contribute 3D models of buildings, street elements, or other urban objects. [See 3d modeling guide on `3dstreet-assets-source` README.](https://github.com/3DStreet/3dstreet-assets-source#readme) **The [asset system](/docs/key-features/asset-system/) allows you to upload any 3D model right away, just open the app and drag and drop to use.**
* GIS and mapping: If you have experience with geographic information systems (GIS), you can help improve the geospatial accuracy and detail of the project by incorporating real-world map data or satellite imagery. Here's an example project that leverages 3DStreet for visualization of GIS data: https://github.com/kfarr/zoningviz
* Documentation and tutorials: Writing documentation, creating tutorials, or making video guides can help newcomers learn how to contribute to the project and use the tools more effectively. You're reading the docs now. It's all based on [docusaurus](https://docusaurus.io/) and our `3dstreet-docs` repo is here: https://github.com/3DStreet/3dstreet-docs
* Testing and feedback: Test the existing models, tools, and workflows, and provide feedback to improve the project. [There are some tests](https://github.com/3DStreet/3dstreet/tree/main/test) but not so great coverage. Please feel free to file an issue, [the 3DStreet repo is the best to file new issues](https://github.com/3DStreet/3dstreet/issues/new).
* Community building: Engage with other contributors, help moderate forums, or organize events to promote the project and bring together people with shared interests. [Join our discord](https://discord.com/invite/VN242sx9qu).
4 changes: 0 additions & 4 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,6 @@ Welcome to the 3DStreet documentation.
<br/>
<br/>

![Screenshot of 3 different camera perspectives from 3DStreet Editor.](/img/docs/3dstreet-editor-camera-combo-views.jpg)
<br/>
<br/>

**You can customize your street scene to match any configuration.** Use **3DStreet Editor** tools to modify, add, or clone objects to match an exisiting or future street configuration. [Check out the introductory Editor docs to learn the basic capabilities.](./3dstreet-editor/overview-3dstreet-editor)
<br/>
<br/>
Expand Down
2 changes: 1 addition & 1 deletion docs/key-features/ai-rendering.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 5
sidebar_position: 2
---

# AI Rendering
Expand Down
2 changes: 1 addition & 1 deletion docs/key-features/ar-ready-export.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 2
sidebar_position: 6
---

# AR Ready Export
Expand Down
61 changes: 61 additions & 0 deletions docs/key-features/asset-system.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
sidebar_position: 4
---

# Asset System

The 3DStreet Asset System is the home for everything you've added to your account — your own uploaded 3D models, custom images, videos, and other media that your scenes reference. It's available in both the **Editor** and the **Generator**, so anything you upload once is ready to use wherever you're working.

## One panel for all your assets

The **Assets panel** on the left side of the editor (and generator) gives you a single, browseable view of every asset in your account. From the panel you can:

- **Filter by type** — show only meshes (`.glb` models), images, or videos to quickly narrow the list
- **Drag any asset directly into the scene** to place it where you drop it
- **Open an asset's details** to rename it, preview it, see metadata and attribution, or remove it

Because the panel is shared across all your scenes, anything you upload once is available everywhere — no per-scene re-importing, no copy-pasting URLs between projects.

## Uploading custom assets

Drag any supported file from your computer onto the editor viewport or onto the Assets panel itself. Supported formats:

| Type | Formats |
|--|--|
| 3D models | `.glb` |
| Images | `.jpg`, `.png`, `.webp` |

The file is uploaded to your account in the background. You'll see a progress indicator in the Assets panel sidebar while the upload runs; the asset becomes draggable as soon as it's ready. For step-by-step instructions on the editor flow, see [Adding Custom Models and Images to a Scene](/docs/3dstreet-editor/custom-models-and-images).

### Asset details

Click any custom asset's thumbnail in the Assets panel to open its **details modal**. From there you can rename the asset, preview it in an embedded viewer, see its file size and attribution metadata, download the original file, or delete it from your account.

## Storage and quotas

Each account has a storage quota for uploaded assets. A quota indicator at the bottom of the Assets panel shows how much of your quota is used; it turns yellow as you approach the limit and red when you're at it. Pro and Team plans include significantly more storage — see the [pricing page](/pricing) for the storage quota included with each plan.

Per-file size limit is **50 MB** for `.glb` uploads. Files larger than that can still be previewed in your current session — useful for very large photogrammetry scans — but won't persist to the cloud.

If you reach your quota, new uploads run in local-only mode until you free up space (by deleting old assets) or upgrade your plan.

## Bleeding-edge GLB optimization, automatic

3D model optimization is normally a tedious, expert-only step that sits between "I have a model" and "it loads fast in a browser." The 3DStreet Asset System gives every user push-button access to the same leading-edge compression techniques used by professional 3D pipelines — and runs them automatically on every upload:

- **Texture compression** — textures are re-encoded to WebP at quality 0.85 and resized down to a maximum of 2048×2048
- **Mesh deduplication and pruning** — unused data, duplicate vertices, and orphaned nodes are removed
- **Draco mesh compression** — geometry is compressed with Draco for dramatically smaller files and faster loading
- **Bail-if-bigger** — if the optimized output is larger than the original (common when the file is already well-optimized), 3DStreet keeps the original instead
- **Already-optimized detection** — files that already use Draco + WebP skip the pipeline entirely

Both the **original** and the **optimized** versions are stored. Scenes load the optimized version by default; the original is kept so you can re-download it, share it, or re-process it later. Only the original file counts against your storage quota — the optimized derivative is on us.

## Attribution

When you upload a `.glb`, 3DStreet automatically extracts attribution metadata from the file — title, author, source, and license, if present. This metadata is visible in the asset details modal and is preserved with the asset, so credits travel with the model even as you reuse it across scenes.

## Related

- [Adding Custom Models and Images to a Scene](/docs/3dstreet-editor/custom-models-and-images) — the editor-side how-to
- [3D Model Library](/docs/key-features/model-library) — the built-in library catalog
2 changes: 1 addition & 1 deletion docs/key-features/console.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 4
sidebar_position: 5
---

# Console
Expand Down
2 changes: 1 addition & 1 deletion docs/key-features/viewer-modes.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 3
sidebar_position: 7
---

# Viewer Modes
Expand Down
Loading
Loading