Skip to content

Commit

Permalink
docs: correct incoherences in recipes (#618)
Browse files Browse the repository at this point in the history 
* docs: corrected load models code examples

* docs: added code groups to texture examples with proper suspense

* docs: corrected code examples for text-3D

* chore: fix lint
  • Loading branch information
@alvarosabu
alvarosabu authored May 8, 2024
1 parent 9da1b8d commit 7b88bf9
Show file tree
Hide file tree
Showing 10 changed files with 378 additions and 126 deletions.
67 changes: 67 additions & 0 deletions .eslintrc-auto-import.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
{
"globals": {
"Component": true,
"ComponentPublicInstance": true,
"ComputedRef": true,
"EffectScope": true,
"InjectionKey": true,
"PropType": true,
"Ref": true,
"VNode": true,
"WritableComputedRef": true,
"computed": true,
"createApp": true,
"customRef": true,
"defineAsyncComponent": true,
"defineComponent": true,
"effectScope": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isProxy": true,
"isReactive": true,
"isReadonly": true,
"isRef": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"toValue": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useSlots": true,
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true
}
}
67 changes: 67 additions & 0 deletions docs/.eslintrc-auto-import.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
{
"globals": {
"Component": true,
"ComponentPublicInstance": true,
"ComputedRef": true,
"EffectScope": true,
"InjectionKey": true,
"PropType": true,
"Ref": true,
"VNode": true,
"WritableComputedRef": true,
"computed": true,
"createApp": true,
"customRef": true,
"defineAsyncComponent": true,
"defineComponent": true,
"effectScope": true,
"getCurrentInstance": true,
"getCurrentScope": true,
"h": true,
"inject": true,
"isProxy": true,
"isReactive": true,
"isReadonly": true,
"isRef": true,
"markRaw": true,
"nextTick": true,
"onActivated": true,
"onBeforeMount": true,
"onBeforeUnmount": true,
"onBeforeUpdate": true,
"onDeactivated": true,
"onErrorCaptured": true,
"onMounted": true,
"onRenderTracked": true,
"onRenderTriggered": true,
"onScopeDispose": true,
"onServerPrefetch": true,
"onUnmounted": true,
"onUpdated": true,
"provide": true,
"reactive": true,
"readonly": true,
"ref": true,
"resolveComponent": true,
"shallowReactive": true,
"shallowReadonly": true,
"shallowRef": true,
"toRaw": true,
"toRef": true,
"toRefs": true,
"toValue": true,
"triggerRef": true,
"unref": true,
"useAttrs": true,
"useCssModule": true,
"useCssVars": true,
"useSlots": true,
"watch": true,
"watchEffect": true,
"watchPostEffect": true,
"watchSyncEffect": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true
}
}
39 changes: 25 additions & 14 deletions docs/cookbook/load-models.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ For this guide we are going to focus on loading gLTF (GL Transmission Format) mo
There are several ways to load models on TresJS:

::: warning
Please note that in the examples above we use top level `await`s. Make sure to wrap such code with a [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component. See Suspense for more information.
Please note that in the examples below use top level `await`. Make sure to wrap such code with a Vue's [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component.
:::

## Using `useLoader`
Expand All @@ -37,10 +37,8 @@ const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')

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

```html{2}
<TresCanvas>
<primitive :object="scene" />
</TresCanvas>
```html
<primitive :object="scene" />
```

> The `<primitive />` component is not a standalone component in the Tres source code. Instead, it's a part of the Tres core functionality. When you use `<primitive>`, it is translated to a `createElement` call, which creates the appropriate three.js object based on the provided "object" prop.
Expand All @@ -67,11 +65,11 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl

Alternatively you can easily select objects inside the model using the `nodes` property.

```vue
<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
::: code-group

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
```vue [App.vue]
<script setup lang="ts">
import Model from './Model.vue'
</script>
<template>
Expand All @@ -82,11 +80,26 @@ const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gl
>
<TresPerspectiveCamera :position="[11, 11, 11]" />
<OrbitControls />
<primitive :object="nodes.MyModel" /> // please note that "MyModel" here is just a placeholder
<Suspense>
<Model />
</Suspense>
</TresCanvas>
</template>
```

```vue [Model.vue]
<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
</script>
<template>
<primitive :object="node.AkuAku" />
</template>
```
:::

## Using `GLTFModel`

The `GLTFModel` component is a wrapper around the `useGLTF` composable, which is available from the [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.
Expand Down Expand Up @@ -121,10 +134,8 @@ const model = await useFBX('/models/AkuAku.fbx')

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

```html{2}
<TresCanvas shadows alpha>
<primitive :object="scene" />
</TresCanvas>
```html
<primitive :object="model" />
```

## FBXModel
Expand Down
69 changes: 46 additions & 23 deletions docs/cookbook/load-textures.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ Three-dimensional (3D) textures are images that contain multiple layers of data,

There are two ways of loading 3D textures in TresJS:

::: warning
Please note that in the examples below use top level `await`. Make sure to wrap such code with a Vue's [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) component.
:::

## Using `useLoader`

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.
Expand All @@ -31,18 +35,41 @@ const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')

Then you can pass the texture to a material:

```html
<Suspense>
<TresCanvas>
<TresMesh>
<TresSphereGeometry :args="[1,32,32]" />
<TresMeshStandardMaterial :map="texture" />
</TresMesh>
::: code-group
```vue [App.vue]
<script setup lang="ts">
import TexturedSphere from './TexturedSphere.vue'
</script>
<template>
<TresCanvas
clear-color="#82DBC5"
shadows
alpha
>
<Suspense>
<TexturedSphere />
</Suspense>
</TresCanvas>
</Suspense>
</template>
```

Notice in the example above that we are using the `Suspense` component to wrap the `TresCanvas` component. This is because `useLoader` returns a `Promise` and we need to wait for it to resolve before rendering the scene.
```vue [Model.vue]
<script setup lang="ts">
import { useLoader } from '@tresjs/core'
import { TextureLoader } from 'three'
const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
</script>
<template>
<TresMesh>
<TresSphereGeometry :args="[1, 32, 32]" />
<TresMeshStandardMaterial :map="texture" />
</TresMesh>
</template>
```
:::

## Using `useTexture`

Expand All @@ -67,18 +94,14 @@ const pbrTexture = await useTexture({
Similar to the previous example, we can pass all the textures to a material via props:

```html
<Suspense>
<TresCanvas>
<TresMesh>
<TresSphereGeometry :args="[1,32,32]" />
<TresMeshStandardMaterial
:map="pbrTexture.map"
:displacementMap="pbrTexture.displacementMap"
:roughnessMap="pbrTexture.roughnessMap"
:normalMap="pbrTexture.normalMap"
:aoMap="pbrTexture.ambientOcclusionMap"
/>
</TresMesh>
</TresCanvas>
</Suspense>
<TresMesh>
<TresSphereGeometry :args="[1,32,32]" />
<TresMeshStandardMaterial
:map="pbrTexture.map"
:displacementMap="pbrTexture.displacementMap"
:roughnessMap="pbrTexture.roughnessMap"
:normalMap="pbrTexture.normalMap"
:aoMap="pbrTexture.ambientOcclusionMap"
/>
</TresMesh>
```
Loading

0 comments on commit 7b88bf9

Please sign in to comment.