Skip to content

Commit 474c229

Browse files
update Open Source Docs from Roblox internal teams
1 parent d55a2c0 commit 474c229

File tree

3 files changed

+161
-40
lines changed

3 files changed

+161
-40
lines changed

content/en-us/art/modeling/3d-importer.md

Lines changed: 156 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,69 @@ title: 3D Importer
33
description: 3D Importer imports third-party .fbx, .gltf, and .obj 3D model assets into Studio.
44
---
55

6-
<iframe width="800" height="450" src="https://www.youtube-nocookie.com/embed/4RonlfpKzHA" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
7-
<br />
6+
The 3D Importer allows you to import `.fbx`, `.gltf`, or `.obj` 3D models into Studio as a custom `Class.Model`. This includes meshes with PBR textures, meshes with rigging, skinning, and animation data, and meshes designed as avatar items.
7+
8+
<Grid container spacing={2} style={{ marginBottom: 24, width: '100%' }}>
9+
<Grid item xs={6} style={{ padding: 16 }}>
10+
<Grid item container wrap="nowrap" direction="column" style={{ gap: 8, flex: 1 }}>
11+
12+
<div
13+
className="container"
14+
style={{ position: "relative", paddingBottom: "56.25%", height: 0, marginBottom: 12 }} >
15+
<iframe
16+
src="https://www.youtube-nocookie.com/embed/ikYZloBgqtE"
17+
title="YouTube video player"
18+
frameBorder="0"
19+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
20+
allowFullScreen
21+
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }} ></iframe>
22+
</div>
23+
<Typography variant="body1">
24+
Import general 3D custom models into Studio.
25+
</Typography>
26+
27+
</Grid>
28+
</Grid>
29+
30+
<Grid item xs={6} style={{ padding: 16 }}>
31+
<Grid item container wrap="nowrap" direction="column" style={{ gap: 8, flex: 1 }}>
32+
33+
<div
34+
className="container"
35+
style={{ position: "relative", paddingBottom: "56.25%", height: 0, marginBottom: 12 }} >
36+
<iframe
37+
src="https://www.youtube-nocookie.com/embed/RCsYZe3LoDM"
38+
title="YouTube video player"
39+
frameBorder="0"
40+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
41+
allowFullScreen
42+
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }} ></iframe>
43+
</div>
44+
<Typography variant="body1">
45+
Use the 3D importer to import assets with avatar item components.
46+
</Typography>
47+
</Grid>
48+
</Grid>
49+
</Grid>
50+
51+
To import a 3D object:
852

9-
The 3D Importer allows you to import `.fbx`, `.gltf`, or `.obj` 3D models into Studio as a custom `Class.Model`.
53+
1. In the toolbar's **Home** or **Avatar** tab, click **Import 3D**.
54+
1. Alternatively, use **File** > **Import 3D** to open up the Import 3D tool.
55+
2. In the file browser, select the supported `.fbx`, `.gltf` or `.obj` files you intend to import.
56+
1. If selecting one object, the [import preview](#import-preview) window screen appears for that object.
57+
2. If selecting multiple objects, the files are added to the [import queue](#import-queue).
58+
3. Configure your import settings and verify any [warning or error messages](#warnings-and-errors).
59+
4. Click **Import**.
1060

11-
- Meshes with basic or PBR ([surface appearance](../../art/modeling/surface-appearance.md)) textures.
12-
- Meshes with [rigging and skinning data](../../art/modeling/rigging.md).
13-
- Meshes with animation data.
14-
- Specialized meshes, such as [accessories](../../art/accessories/index.md), or characters with [facial animation data](../../art/characters/facial-animation/index.md).
61+
<Alert severity ='info'>
62+
To directly import 3D assets using HTTP requests, see the [Open Cloud usage guide for assets](../../cloud/guides/usage-assets.md).
63+
</Alert>
64+
65+
## Supported file types
66+
67+
Before importing a 3D object, ensure that the `.fbx`, `.gltf` or `.obj` meets Studio's [mesh requirements](../../art/characters/specifications.md) to reduce errors or unexpected behavior.
1568

16-
<BaseAccordion>
17-
<AccordionSummary>
18-
<Typography variant="subtitle2">Supported file type features</Typography>
19-
</AccordionSummary>
20-
<AccordionDetails>
2169
<table><thead>
2270
<tr>
2371
<th style={{width:"20%"}}>**File type**</th>
@@ -27,54 +75,106 @@ The 3D Importer allows you to import `.fbx`, `.gltf`, or `.obj` 3D models into S
2775
<tbody>
2876
<tr>
2977
<td>OBJ (`.obj`)</td>
30-
<td>Supports:<br/><br/>— Basic single mesh objects</td>
78+
<td>— Basic single mesh objects</td>
3179
<td>Simple mesh geometry use-cases.</td>
3280
</tr>
3381
<tr>
3482
<td>FBX (`.fbx`)</td>
35-
<td>Supports:<br/><br/>— Multiple mesh objects and hierarchies<br/>— Textures, including basic and [PBR textures](../../art/modeling/surface-appearance.md).<br/>— Cage mesh objects<br/>— [Rigging and armature data](../../art/modeling/rigging.md)<br/>— Additional components for [avatar](../../avatar/index.md) items.<br/>— Animation data<br/>— [Vertex colors](../blender.md#vertex-painting)</td>
83+
<td>— Multiple mesh objects and hierarchies<br/>— Textures, including basic and [PBR textures](../../art/modeling/surface-appearance.md).<br/>— Cage mesh objects<br/>— [Rigging and armature data](../../art/modeling/rigging.md)<br/>— Additional components for [avatar](../../avatar/index.md) items<br/>— Animation data<br/>— [Vertex colors](../blender.md#vertex-painting)</td>
3684
<td>Any type of 3D import, including but not limited to [game assets](../../assets.md) or [avatar items](../../avatar).</td>
3785
</tr>
3886
<tr>
3987
<td>gLTF (`.gltf`)</td>
40-
<td>Supports:<br/><br/>— Multiple mesh objects and hierarchies<br/>— Textures, including basic and [PBR textures](../../art/modeling/surface-appearance.md).<br/>— Cage mesh objects<br/>— [Rigging and armature data](../../art/modeling/rigging.md)<br/>— Additional components for [avatar](../../avatar/index.md) items.<br/>— Animation data<br/>— [Vertex colors](../blender.md#vertex-painting)</td>
88+
<td>— Multiple mesh objects and hierarchies<br/>— Textures, including basic and [PBR textures](../../art/modeling/surface-appearance.md).<br/>— Cage mesh objects<br/>— [Rigging and armature data](../../art/modeling/rigging.md)<br/>— Additional components for [avatar](../../avatar/index.md) items<br/>— Animation data<br/>— [Vertex colors](../blender.md#vertex-painting)</td>
4189
<td>Any type of 3D import, including but not limited to [game assets](../../assets.md) or [avatar items](../../avatar).</td>
4290
</tr>
4391
</tbody></table>
44-
</AccordionDetails>
45-
</BaseAccordion>
4692

47-
<Alert severity ='info'>
48-
To directly import 3D assets using HTTP requests, see the [Open Cloud usage guide for assets](../../cloud/guides/usage-assets.md).
49-
</Alert>
93+
## Import queue
5094

51-
The 3D Importer is divided into three sections:
95+
If you selected multiple files with the 3D Importer, you can use the import queue to bulk manage your various imports.
5296

53-
<img src="../../assets/modeling/meshes/3d-Importer-Panels.png" width="80%" alt="The 3D importer interface, showing a preview of the mesh in the top left, a list of 3D objects on the bottom left, and a list of toggle-able properties on the right side."/>
97+
<img src="../../assets/modeling/meshes/3d-Import-Queue.png" width="80%" alt="The 3D importer interface, showing a preview of the mesh in the top left, a list of 3D objects on the bottom left, and a list of toggle-able properties on the right side."/>
5498

55-
A. The **preview panel**, located in the top left, allows you to rotate and examine 3D objects before importing into your workspace or Toolbox.
99+
<Grid container spacing={2}>
100+
<Grid item XSmall={2} Medium={1} Large={1} XLarge={1}><img src="../../assets/misc/Box-Label-A.png" width="40" style={{float:"right"}} /></Grid>
101+
<Grid item XSmall={10} Medium={11} Large={11} XLarge={11} style={{marginTop:"4px"}}>
102+
The **top bar** allows you to add new files, clear the queue, search and filter, and import all enabled models.
103+
</Grid>
104+
</Grid>
105+
<Grid container spacing={2}>
106+
<Grid item XSmall={2} Medium={1} Large={1} XLarge={1}><img src="../../assets/misc/Box-Label-B.png" width="40" style={{float:"right"}} /></Grid>
107+
<Grid item XSmall={10} Medium={11} Large={11} XLarge={11} style={{marginTop:"4px"}}>
108+
The **import queue** lists all added files, with quick access dropdowns to change creator, presets, and file paths.
109+
</Grid>
110+
</Grid>
56111

57-
B. The **hierarchy panel**, located in the bottom left, allows you to select specific parts of your model to import or apply specific settings to, including textures, child objects, animations, or rig data.
112+
### Add files to queue
58113

59-
C. The **inspector panel**, located on the right, allows you to apply various settings to the imported object.
114+
To open a file browser and add additional files to the import queue, you can:
60115

61-
## Import 3D objects
116+
- Click the **Add file** button in the top bar of the Import queue window.
117+
- In the Studio's **Home** or **Avatar** tab, click **Import 3D**.
118+
- Navigate to **File** > **Import 3D**.
62119

63-
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ikYZloBgqtE" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
64-
<br />
120+
### Remove files from queue
65121

66-
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/RCsYZe3LoDM" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
67-
<br />
122+
To remove all files from the queue, click the **Clear queue** button with the broom icon. To remove an individual file from the queue, right-click an item in the queue and select **Delete from queue**.
68123

69-
Before importing a 3D object, ensure that the `.fbx`, `.gltf` or `.obj` meets Studio's [mesh requirements](../../art/characters/specifications.md) to reduce errors or unexpected behavior.
124+
### Apply preset settings
70125

71-
To import a 3D object:
126+
Use the **Import Preset** column to select a preset configuration to apply to your model. For more information, see [Presets](#presets).
72127

73-
1. In the toolbar's **Home** or **Avatar** tab, click **Import 3D**. A file browser displays.
74-
2. Select the `.fbx`, `.gltf` or `.obj` you intend to import. The Importer window displays.
75-
3. Verify the object preview and check that the [import settings](#import-settings) are correct for your object.
76-
4. Verify any [warning or error messages](#warnings-and-errors).
77-
5. Click **Import**.
128+
You can also apply the settings of one item to all items by right-clicking an item with the desired settings and selecting **Apply settings to all**.
129+
130+
### Access individual preview and settings
131+
132+
Click the individual **Asset** name of an unimported model to access the import preview for that item. Use the import preview to view and check your model, as well as set any individual [import settings](#import-settings).
133+
134+
### Import files
135+
136+
Ensure that each item you want to import has a checkbox enabled in the first column. By default, all items are selected if they are importable.
137+
138+
Press the **Import** button to start the import process.
139+
140+
## Import preview
141+
142+
The import preview window appears if you are importing a single file, or if you selected an individual item from the import queue. This preview window provides individual controls for the various objects in your model.
143+
144+
The preview window is divided into multiple sections:
145+
146+
<img src="../../assets/modeling/meshes/3d-Importer-Panels.png" width="80%" alt="The 3D importer interface, showing a preview of the mesh in the top left, a list of 3D objects on the bottom left, and a list of toggle-able properties on the right side."/>
147+
148+
<Grid container spacing={2}>
149+
<Grid item XSmall={2} Medium={1} Large={1} XLarge={1}><img src="../../assets/misc/Box-Label-A.png" width="40" style={{float:"right"}} /></Grid>
150+
<Grid item XSmall={10} Medium={11} Large={11} XLarge={11} style={{marginTop:"4px"}}>
151+
The **file path** of your model file. Click **Browse** to edit.
152+
</Grid>
153+
</Grid>
154+
<Grid container spacing={2}>
155+
<Grid item XSmall={2} Medium={1} Large={1} XLarge={1}><img src="../../assets/misc/Box-Label-B.png" width="40" style={{float:"right"}} /></Grid>
156+
<Grid item XSmall={10} Medium={11} Large={11} XLarge={11} style={{marginTop:"4px"}}>
157+
The **preset** applied to your import. Use the dropdown to select multiple presets, or the hamburger menu to set a new preset.
158+
</Grid>
159+
</Grid>
160+
<Grid container spacing={2}>
161+
<Grid item XSmall={2} Medium={1} Large={1} XLarge={1}><img src="../../assets/misc/Box-Label-C.png" width="40" style={{float:"right"}} /></Grid>
162+
<Grid item XSmall={10} Medium={11} Large={11} XLarge={11} style={{marginTop:"4px"}}>
163+
The **3D preview** of your model. Use mouse buttons and top-right icons for various camera options and views.
164+
</Grid>
165+
</Grid>
166+
<Grid container spacing={2}>
167+
<Grid item XSmall={2} Medium={1} Large={1} XLarge={1}><img src="../../assets/misc/Box-Label-D.png" width="40" style={{float:"right"}} /></Grid>
168+
<Grid item XSmall={10} Medium={11} Large={11} XLarge={11} style={{marginTop:"4px"}}>
169+
The **object hierarchy** of the imported object. Includes mesh objects and other supported components.
170+
</Grid>
171+
</Grid>
172+
<Grid container spacing={2}>
173+
<Grid item XSmall={2} Medium={1} Large={1} XLarge={1}><img src="../../assets/misc/Box-Label-E.png" width="40" style={{float:"right"}} /></Grid>
174+
<Grid item XSmall={10} Medium={11} Large={11} XLarge={11} style={{marginTop:"4px"}}>
175+
The **import settings** for your import. For a complete list of settings, see [Import settings](#import-settings).
176+
</Grid>
177+
</Grid>
78178

79179
### Import settings
80180

@@ -261,7 +361,25 @@ Object Geometry includes information on the dimensions and polycount of the sele
261361
</tbody>
262362
</table>
263363

264-
### Warnings and errors
364+
## Presets
365+
366+
You can save presets of various import settings to quickly apply later within the [import preview](#import-preview) or [import queue](#import-queue).
367+
368+
By default, you can select between two presets:
369+
370+
- **Studio Default**: The default import behavior.
371+
- **Last Imported**: Uses the settings applied to the most recent import.
372+
373+
You can use the **. . .** menu next to the Presets dropdown for additional options:
374+
375+
- **Reset all**: Removes any changes to the current configuration, putting settings back in the default state for the current preset.
376+
- **Save selection**: Allows you to save any new changes to the importer settings into the currently selected preset.
377+
- **Save as new**: Sets the current settings as a new preset. A dialogue box displays allowing you to set a name.
378+
- **Set as default**: Sets the current preset as the default for all imports moving forward.
379+
- **Rename**: Renames the current preset.
380+
- **Delete**: Deletes the current preset. Resets to `Studio Default` preset.
381+
382+
## Warnings and errors
265383

266384
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/UEHEsmCslBU" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
267385
<br />
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 2 additions & 2 deletions
Loading

0 commit comments

Comments
 (0)