Skip to content

Commit ae75643

Browse files
docs(app): Improve load model docs page (#505)
* docs(app): Improve load model docs page * docs(app): fix highlights in code demos --------- Co-authored-by: Alvaro Saburido <[email protected]>
1 parent 280d248 commit ae75643

File tree

1 file changed

+7
-9
lines changed

1 file changed

+7
-9
lines changed

docs/examples/load-models.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ For this guide we are going to focus on loading gLTF (GL Transmission Format) mo
1010

1111
There are several ways to load models on TresJS:
1212

13+
::: warning
14+
Please note that the examples above we use top level await, make sure you wrap it with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information. .
15+
:::
16+
1317
## Using `useLoader`
1418

1519
The `useLoader` composable allows you to pass any type of three.js loader and a URL to load the resource from. It returns a `Promise` with the loaded resource.
@@ -25,11 +29,9 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
2529

2630
Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive) component to render it:
2731

28-
```html{3}
32+
```html{2}
2933
<TresCanvas>
30-
<Suspense>
3134
<primitive :object="scene" />
32-
</Suspense>
3335
</TresCanvas>
3436
```
3537

@@ -72,9 +74,7 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
7274
>
7375
<TresPerspectiveCamera :position="[11, 11, 11]" />
7476
<OrbitControls />
75-
<Suspense>
76-
<primitive :object="nodes.MyModel" />
77-
</Suspense>
77+
<primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
7878
</TresCanvas>
7979
</template>
8080
```
@@ -113,11 +113,9 @@ const model = await useFBX('/models/AkuAku.fbx')
113113

114114
Then is as straightforward as adding the scene to your scene:
115115

116-
```html{3}
116+
```html{2}
117117
<TresCanvas shadows alpha>
118-
<Suspense>
119118
<primitive :object="scene" />
120-
</Suspense>
121119
</TresCanvas>
122120
```
123121

0 commit comments

Comments
 (0)