useTresContext must be used together with useTresContextProvider

[LNNying]

Select Topic Area

Question

Body

在Vue3中使用OrbitControls报错:‘useTresContext must be used together with useTresContextProvider’
The code is as follows：

<TresMesh>
  <TresBoxGeometry :width="100" :height="100" :depth="100" />
  <TresMeshLambertMaterial color="orange" />
</TresMesh>
<TresPointLight :intensity="1" :position="[0, 5, 0]" />

<script setup lang="ts"> import {TresCanvas, extend, useTresContext} from "@tresjs/core"; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'; extend({ OrbitControls }) const context = useTresContext(); console.log(context); </script>

[BrunaFusiger]

Hello! I had this error too and honestly, I couldn't understand why... But I found a different solution:
https://cientos.tresjs.org/guide/

I install this package,
Import in my component js import { OrbitControls } from '@tresjs/cientos'

I just use it inside of after

 <TresCanvas preset="realistic">
      <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
      **<OrbitControls />**
      <TresMesh ref="sphereRef" :position="spherePosition">
          <TresSphereGeometry />
          <TresMeshNormalMaterial wireframe />
      </TresMesh>
      <TresAxesHelper />
</TresCanvas>

and works :)

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[justinrds2001]

For anyone still getting this error. Tres JS documentation reads the following:

WARNING
useTresContext can be only be used inside of a TresCanvas since this component acts as the provider for the context data.

This means useTresContext can only be used in a "sub-component" that is passed as a slot for TresCanvas:
App.vue:

<template>
  <TresCanvas
    render-mode="manual"
  >
    <SubComponent />
  </TresCanvas>
</template>

SubComponent.vue:

<script lang="ts" setup>
import { useTresContext } from '@tresjs/core'

const context = useTresContext()
</script>