Uncaught Error: useTresContext must be used together with useTresContextProvider

freerig commented 1 year ago

Describe the bug

This error hapend when I write const state = useTres() or const { state } = useTres() In devtools, and the scene is not loaded. This is my code (in App.vue):

import { TresCanvas, extend, useTres } from '@tresjs/core';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { watchEffect } from 'vue'

const state = useTres()

let controls: OrbitControls | null = null

watchEffect(()=>{
  if (state.renderer && state.camera) {
    controls = new OrbitControls(state.camera.value!, state.renderer.value.domElement )
  }
})

extend({OrbitControls})
</script>

<template>
  <TresCanvas window-size>
    <TresPerspectiveCamera />

    <TresScene>
      <TresMesh>
        <TresBoxGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </TresScene>
  </TresCanvas>
</template>

I did it like in this tutorial: The tutorial

Reproduction

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

Steps to reproduce

Add

import {  useTres } from '@tresjs/core';
const state = useTres()

to your code

System Info

No response

Used Package Manager

npm

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

alvarosabu commented 1 year ago

The context is not available on the component containing the TresCanvas. To access it move it to a child component

https://tresjs.org/api/composables.html#usetrescontext

freerig commented 1 year ago

So why does it work on the video ?

alvarosabu commented 1 year ago

So why does it work on the video ?

Probably the video is for the previous versions when it was useTres instead of useTresContext

Tresjs / tres