Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: 577 tres docs cookbook orbit controls code throws error #580

Merged
merged 5 commits into from
Mar 7, 2024
Merged

docs: 577 tres docs cookbook orbit controls code throws error #580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a497b23
docs(cookbook): corrected code examples for local orbitcontrol
alvarosabu Mar 7, 2024
fb9a563
docs(cookbook): spanish corrections
alvarosabu Mar 7, 2024
e90ae0b
docs(cookbook): renamte `useTres` for `useTresContext`
alvarosabu Mar 7, 2024
af0c926
docs: corrected typo on broken links to `useTresContext` docs
alvarosabu Mar 7, 2024
51aa354
chore: update german "orbit-controls" cookbook page
DennisSmuda Mar 7, 2024
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
58 changes: 36 additions & 22 deletions docs/cookbook/orbit-controls.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,41 +39,56 @@ extend({ OrbitControls })

Now you can use the `TresOrbitControls` component in your scene.

```vue
::: code-group

```vue [OrbitControls.vue]
<template>
<TresCanvas
shadows
alpha
>
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
<TresOrbitControls
v-if="state.renderer"
:args="[state.camera, state.renderer?.domElement]"
/>
</TresCanvas>
<TresOrbitControls
v-if="renderer"
:args="[camera, renderer?.domElement]"
/>
</template>
```
:::

Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer, you need to pass them as arguments.

You can use the [useTres](/api/composables#usetres) composable to get the camera and the renderer.
Since [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) needs a reference to the camera and the renderer, you need to pass them as arguments. You can use the [useTresContext](/api/composables#usetrescontext) composable to get the camera and the renderer.

::: warning
`useTresContext` can be only be used inside of a `TresCanvas` since `TresCanvas` acts as the provider for the context data. Thats why we created a subcomponent called `OrbitControls.vue`. See more about [context](/api/composables#usetrescontext).
:::

```ts
import { useTres } from '@tresjs/core'
import { useTresContext } from '@tresjs/core'

const { state } = useTres()
const { camera, renderer } = useTresContext()
```

So the final code would be something like this:

```vue
::: code-group

```vue [OrbitControls.vue]
<script setup lang="ts">
import { extend, useTres } from '@tresjs/core'
import { extend, useTresContext } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'

extend({ OrbitControls })

const { state } = useTres()
const { camera, renderer } = useTresContext()
</script>

<template>
<TresOrbitControls
v-if="renderer"
:args="[camera, renderer?.domElement]"
/>
</template>
```

```vue [App.vue]
<script setup lang="ts">
import { OrbitControls } from './OrbitControls.vue'
</script>

<template>
Expand All @@ -82,13 +97,12 @@ const { state } = useTres()
alpha
>
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
<TresOrbitControls
v-if="state.renderer"
:args="[state.camera, state.renderer?.domElement]"
/>
<OrbitControls />
</TresCanvas>
</template>
```
:::


## OrbitControls from `cientos`

Expand Down
52 changes: 32 additions & 20 deletions docs/de/cookbook/orbit-controls.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,24 +38,22 @@ extend({ OrbitControls })

Jetzt kannst du die Komponente `TresOrbitControls` in deiner Szene verwenden.

```vue{7-10}
::: code-group

```vue [OrbitControls.vue]
<template>
<TresCanvas
shadows
alpha
>
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
<TresOrbitControls
v-if="state.renderer"
:args="[state.camera, state.renderer?.domElement]"
/>
</TresCanvas>
<TresOrbitControls
v-if="renderer"
:args="[camera, renderer?.domElement]"
/>
</template>
```

Da [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) eine Referenz zur Kamera und zum Renderer benötigt, musst du diese als Argumente übergeben.
Da [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) eine Referenz zur Kamera und zum Renderer benötigen, musst du diese als Argumente übergeben. Du kannst das Composable [useTresContext](/de/api/composables#usetrescontext) verwenden, um die Kamera und den Renderer zu erhalten.

Du kannst das Composable [useTres](/de/api/composables#usetrescontext) verwenden, um die Kamera und den Renderer zu erhalten.
::: warning
`useTresContext` kann nur innerhalb eines `TresCanvas` verwendet werden, da `TresCanvas` die Kontext-Daten bereitstellt. Deshalb haben wir eine Unterkomponente namens `OrbitControls.vue` implementiert. Erfahre mehr über [context](/de/api/composables#usetrescontext).
:::

```ts
import { useTres } from '@tresjs/core'
Expand All @@ -65,14 +63,29 @@ const { state } = useTres()

Dann würde der finale Code etwa so aussehen:

```vue
::: code-group

```vue [OrbitControls.vue]
<script setup lang="ts">
import { extend, useTres } from '@tresjs/core'
import { extend, useTresContext } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'

extend({ OrbitControls })

const { state } = useTres()
const { camera, renderer } = useTresContext()
</script>

<template>
<TresOrbitControls
v-if="renderer"
:args="[camera, renderer?.domElement]"
/>
</template>
```

```vue [App.vue]
<script setup lang="ts">
import { OrbitControls } from './OrbitControls.vue'
</script>

<template>
Expand All @@ -81,13 +94,12 @@ const { state } = useTres()
alpha
>
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
<TresOrbitControls
v-if="state.renderer"
:args="[state.camera, state.renderer?.domElement]"
/>
<OrbitControls />
</TresCanvas>
</template>
```
:::


## OrbitControls von `cientos`

Expand Down
60 changes: 36 additions & 24 deletions docs/es/cookbook/orbit-controls.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,42 +39,55 @@ extend({ OrbitControls })

Ahora puedes usar el componente `TresOrbitControls` en tu escena.

```vue
::: code-group

```vue [OrbitControls.vue]
<template>
<TresCanvas
shadows
alpha
>
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
<TresOrbitControls
v-if="state.renderer"
:args="[state.camera, state.renderer?.domElement]"
/>
</TresCanvas>
<TresOrbitControls
v-if="renderer"
:args="[camera, renderer?.domElement]"
/>
</template>
```
:::

Dado que [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) necesita una referencia a la cámara y al renderizador, debes pasarlos como argumentos.

Puedes usar el composable [useTres](/api/composables#usetres) para obtener la cámara y el renderizador.
Dado que [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) necesita una referencia a la cámara y al renderizador, debes pasarlos como argumentos. Puedes usar el composable [useTresContext](/es/api/composables#usetrescontext) para obtener la cámara y el renderizador.

::: warning
`useTresContext` solo puede ser utilizado dentro de un `TresCanvas` ya que `TresCanvas` actúa como proveedor de los datos de contexto. Es por eso que creamos un subcomponente llamado `OrbitControls.vue`. Obtén más información sobre [contexto](/api/composables#usetrescontext).
:::

```ts
import { useTres } from '@tresjs/core'
import { useTresContext } from '@tresjs/core'

const { state } = useTres()
const { camera, renderer } = useTresContext()
```

Entonces, el código final sería algo como esto:
So the final code would be something like this:

```vue
::: code-group

```vue [OrbitControls.vue]
<script setup lang="ts">
import { extend, useTres } from '@tresjs/core'
import { extend, useTresContext } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'

extend({ OrbitControls })

const { state } = useTres()
const { camera, renderer } = useTresContext()
</script>

<template>
<TresOrbitControls
v-if="renderer"
:args="[camera, renderer?.domElement]"
/>
</template>
```

```vue [App.vue]
<script setup lang="ts">
import { OrbitControls } from './OrbitControls.vue'
</script>

<template>
Expand All @@ -83,13 +96,12 @@ const { state } = useTres()
alpha
>
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
<TresOrbitControls
v-if="state.renderer"
:args="[state.camera, state.renderer?.domElement]"
/>
<OrbitControls />
</TresCanvas>
</template>
```
:::


## OrbitControls de `cientos`

Expand Down
Loading