docs: add shared state documentation

[whitespacecode]

Still need a proper thumbnail

[netlify]

✅ Deploy Preview for tresjs-docs ready!

Name	Link
🔨 Latest commit	c94d02e
🔍 Latest deploy log	https://app.netlify.com/sites/tresjs-docs/deploys/665ee260c767d700086af9ef
😎 Deploy Preview	https://deploy-preview-699--tresjs-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alvarosabu]

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

<SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />

[whitespacecode]

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.

[alvarosabu]

You can take advantage of vitepress code groups to organize several code blocks on tabs with filenames

See an example of our documentation here

tres/docs/cookbook/load-models.md

Lines 68 to 101 in 8d53bba

	::: code-group
	```vue [App.vue]
	<script setup lang="ts">
	import Model from './Model.vue'
	</script>
	<template>
	<TresCanvas
	clear-color="#82DBC5"
	shadows
	alpha
	>
	<TresPerspectiveCamera :position="[11, 11, 11]" />
	<OrbitControls />
	<Suspense>
	<Model />
	</Suspense>
	</TresCanvas>
	</template>
	```
	```vue [Model.vue]
	<script setup lang="ts">
	import { useGLTF } from '@tresjs/cientos'
	const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
	</script>
	<template>
	<primitive :object="node.AkuAku" />
	</template>
	```
	:::

[whitespacecode]

I have changed the blocks to use code groups. I also added a pinia example.

[alvarosabu]

Same here

[whitespacecode]

Ok