Tres docs' cookbook/orbit-controls code throws error

[andretchen0]

Describe the bug

The docs' cookbook code under "So the final code would be something like this:" throws an error when run.

The working example at the top of the page uses the Cientos component. (Sneaky! Lol)

Here's the code as of March 5, 2024:

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

extend({ OrbitControls })

const { state } = useTres()
</script>

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

Error

Uncaught (in promise) Error: useTresContext must be used together with useTresContextProvider
    at @tresjs_core.js:482
    setup TheExperience.vue:7
    callWithErrorHandling chunk-QSL5RKHU.js:1552
    setupStatefulComponent chunk-QSL5RKHU.js:8620
    setupComponent chunk-QSL5RKHU.js:8581
    mountComponent chunk-QSL5RKHU.js:6983
    processComponent chunk-QSL5RKHU.js:6949
    patch chunk-QSL5RKHU.js:6422
    patchSuspense chunk-QSL5RKHU.js:2665
    process chunk-QSL5RKHU.js:2468
    patch chunk-QSL5RKHU.js:6447
    componentUpdateFn chunk-QSL5RKHU.js:7157
    run chunk-QSL5RKHU.js:422
    update chunk-QSL5RKHU.js:7198
    callWithErrorHandling chunk-QSL5RKHU.js:1552
    flushJobs chunk-QSL5RKHU.js:1750
    promise callback*queueFlush chunk-QSL5RKHU.js:1663
    queueJob chunk-QSL5RKHU.js:1657
    reload chunk-QSL5RKHU.js:1856
    tryWrap chunk-QSL5RKHU.js:1886
    <anonymous> TheExperience.vue:106
    accept client.ts:559
    fetchUpdate client.ts:476
    queueUpdate client.ts:323
    queueUpdate client.ts:323
    handleMessage client.ts:176
    handleMessage client.ts:174
    setupWebSocket client.ts:91

Related

#565

Meta

The thrown error is distinct from #565, so I've created this new issue. Merge with #565?

Reproduction

https://stackblitz.com/edit/tresjs-basic-u2evxe?file=src%2FApp.vue

Steps to reproduce

• Open StackBlitz
• Open console
• See error

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @tresjs/cientos: ^3.5.1 => 3.5.1 
    @tresjs/core: ^3.4.1 => 3.4.1 
    @tresjs/eslint-config-vue: ^0.2.1 => 0.2.1 
    vite: ^4.5.0 => 4.5.0 

### Used Package Manager

npm

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://tresjs.org/guide).
- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.