docs: add shared state documentation #699
Conversation
Still need a proper thumbnail
✅ Deploy Preview for tresjs-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
|
||
| This guide will help you get started with shared state in TresJS by building a simple scene with a cube that can be shared across component files. | ||
|
|
||
| <StackBlitzEmbed project-id="tresjs-minimal-reproduction-rycc4j" /> |
There was a problem hiding this comment.
Hi @whitespacecode since the example doesn't rely on third party libs, can we replace this with a Tresjs repl playground https://play.tresjs.org/ ?
You can find an example on how here
tres/docs/cookbook/lights-shadows.md
Line 14 in 8d53bba
There was a problem hiding this comment.
Hi @alvarosabu
I tried with the playground and i'm getting this error:
'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<cr>' but got '#<cr>')
I tried a few things but i'm keep getting errors on the playground.
Use vitepress code groups
docs/cookbook/shared-state.md
Outdated
|
|
||
| export function useState() { | ||
| return { | ||
| ...toRefs(state) |
There was a problem hiding this comment.
We should slim down the reactivity here.
Feel free to point out if I'm misunderstanding, but I believe Ref<state.mesh> will be deeply reactive. Since a single attached THREE.Mesh contains the entire THREE.Scene graph (+ materials, geometries, and so on), that normally creates a lot of reactivity that goes unused.
It's fine if users want to use Ref<Mesh> in their own code, but we have run into concrete performance problems in the past even in relatively modest scenes. So as an official recipe, I think it would be best to refactor.
Maybe one or both of:
- use
shallow*alternatives - use slimmer data, i.e.
state.isMeshVisible = true
@alvarosabu Thoughts here?
There was a problem hiding this comment.
That's correct, better to use shallowRefs or shallowReactive. I wonder if toRefs automatically use shallowRef it when the state is shallowReactive 🤔
There was a problem hiding this comment.
I wonder if toRefs automatically use shallowRef it when the state is shallowReactive
In the Vue docs, the type indicates that Ref values are returned from toRefs.
There was a problem hiding this comment.
@andretchen0
Yes please feel free to change the .md file.
Most of the code is stuff i gathered from discord or by using the stackblitz of alvarosabu
fixing the vue tabs
improve code block for pinia and fix the naming
Still need a proper thumbnail