` which casts a shadow. When navigating away from the page with the scene and navigating back to the scene (using NuxtLink), I get the error below.\r\n\r\nWhen I remove the `cast-shadow` prop, the bug disappears.\r\n\r\n```\r\nthree.js?v=f17f74c8:17801 Uncaught TypeError: Cannot read properties of null (reading 'state')\r\n at setProgram (three.js?v=f17f74c8:17801:41)\r\n at WebGLRenderer.renderBufferDirect (three.js?v=f17f74c8:17292:23)\r\n at renderObject (three.js?v=f17f74c8:13624:21)\r\n at renderObject (three.js?v=f17f74c8:13631:7)\r\n at WebGLShadowMap.render (three.js?v=f17f74c8:13519:9)\r\n at WebGLRenderer.render (three.js?v=f17f74c8:17493:17)\r\n at tres.js:387:33\r\n at index.mjs:71:52\r\n at Array.map (\u003Canonymous>)\r\n at Object.trigger (index.mjs:71:40)\r\n ```\r\n \u003Cdetails>\r\n \u003Csummary>complete error log\u003C/summary>\r\n\r\n ```\r\nsetProgram\t\t\t\t@\tthree.js?v=f17f74c8:17801\r\nWebGLRenderer.renderBufferDirect\t@\tthree.js?v=f17f74c8:17292\r\nrenderObject\t\t\t\t@\tthree.js?v=f17f74c8:13624\r\nrenderObject\t\t\t\t@\tthree.js?v=f17f74c8:13631\r\nWebGLShadowMap.render\t\t\t@\tthree.js?v=f17f74c8:13519\r\nWebGLRenderer.render\t\t\t@\tthree.js?v=f17f74c8:17493\r\n(anonymous)\t\t\t\t@\ttres.js:387\r\n(anonymous)\t\t\t\t@\tindex.mjs:71\r\ntrigger\t\t\t\t\t@\tindex.mjs:71\r\nwe.immediate\t\t\t\t@\ttres.js:160\r\nloop\t\t\t\t\t@\tindex.mjs:617\r\nrequestAnimationFrame\t\t\r\nresume\t\t\t\t\t@\tindex.mjs:624\r\nor\t\t\t\t\t@\ttres.js:388\r\ncr\t\t\t\t\t@\ttres.js:593\r\n(anonymous)\t\t\t\t@\ttres.js:1086\r\n(anonymous)\t\t\t\t@\truntime-core.esm-bundler.js:2757\r\ncallWithErrorHandling\t\t\t@\truntime-core.esm-bundler.js:199\r\ncallWithAsyncErrorHandling\t\t@\truntime-core.esm-bundler.js:206\r\nhook.__weh.hook.__weh\t\t\t@\truntime-core.esm-bundler.js:2737\r\nflushPostFlushCbs\t\t\t@\truntime-core.esm-bundler.js:385\r\nflushJobs\t\t\t\t@\truntime-core.esm-bundler.js:427\r\nPromise.then\t\t\r\nqueueFlush\t\t\t\t@\truntime-core.esm-bundler.js:322\r\nqueuePostFlushCb\t\t\t@\truntime-core.esm-bundler.js:336\r\nqueueEffectWithSuspense\t\t\t@\truntime-core.esm-bundler.js:7256\r\nbaseWatchOptions.scheduler\t\t@\truntime-core.esm-bundler.js:6138\r\neffect2.scheduler\t\t\t@\treactivity.esm-bundler.js:1892\r\ntrigger\t\t\t\t\t@\treactivity.esm-bundler.js:250\r\nendBatch\t\t\t\t@\treactivity.esm-bundler.js:308\r\nnotify\t\t\t\t\t@\treactivity.esm-bundler.js:594\r\ntrigger\t\t\t\t\t@\treactivity.esm-bundler.js:568\r\nset value\t\t\t\t@\treactivity.esm-bundler.js:1510\r\nfinalizeNavigation\t\t\t@\tvue-router.mjs:3478\r\n(anonymous)\t\t\t\t@\tvue-router.mjs:3343\r\nPromise.then\t\t\r\npushWithRedirect\t\t\t@\tvue-router.mjs:3310\r\npush\t\t\t\t\t@\tvue-router.mjs:3235\r\nnavigate\t\t\t\t@\tvue-router.mjs:2300\r\ncallWithErrorHandling\t\t\t@\truntime-core.esm-bundler.js:199\r\ncallWithAsyncErrorHandling\t\t@\truntime-core.esm-bundler.js:206\r\ninvoker\t\t\t\t\t@\truntime-dom.esm-bundler.js:722\r\n```\r\n\u003C/details>\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-w3neca?file=pages%2Findex.vue\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 14.6.1\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 79.77 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm\r\n pnpm: 9.4.0 - ~/Library/pnpm/pnpm\r\n bun: 1.0.3 - ~/.bun/bin/bun\r\n Browsers:\r\n Chrome: 129.0.6668.100\r\n Safari: 17.6\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.2 \r\n @tresjs/core: ^4.2.10 => 4.2.10 \r\n @tresjs/nuxt: ^3.0.7 => 3.0.7\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nnpm\r\n\r\n### Code of Conduct\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/Tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],507,"cientos","Scene breaks when `cast-shadow` enabled and navigating back to a previously initialized scene","2024-10-11T13:44:29Z","https://github.com/Tresjs/cientos/issues/507",0.7610462,{"description":2911,"labels":2912,"number":2870,"owner":2871,"repository":2897,"state":2883,"title":2913,"updated_at":2914,"url":2915,"score":2916},"# Goal\r\nGenerate three-shakeable components on build time to avoid the need for a catalog of global components. This will be probably a BREAKING CHANGE, especially for cientos.\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\n\r\nimport { TresCanvas, TresPerspectiveCamera, TresScene, TresAmbienLight, useRenderLoop } from '@tresjs/core' \r\nimport { OrbitControls, TransformControls } from '@tresjs/cientos'\r\n\r\nconst sphereRef = ref()\r\n\r\nconst { onLoop } = useRenderLoop()\r\n\r\nonLoop(({ elapsed }) => {\r\n sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1\r\n})\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CTresCanvas v-bind=\"state\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" :fov=\"45\" :near=\"0.1\" :far=\"1000\" :look-at=\"[-8, 3, -3]\" />\r\n \u003COrbitControls make-default />\r\n \u003CTresScene>\r\n \u003CTresAmbientLight :intensity=\"0.5\" />\r\n \u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\r\n\r\n \u003CTresMesh ref=\"sphereRef\" :position=\"[0, 4, 0]\" cast-shadow>\r\n \u003CTresSphereGeometry />\r\n \u003CTresMeshToonMaterial color=\"#FBB03B\" />\r\n \u003C!-- \u003CTresMeshToonMaterial color=\"#FBB03B\" /> -->\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 8, 4]\" :intensity=\"0.7\" cast-shadow />\r\n \u003CTresMesh :rotation=\"[-Math.PI / 2, 0, 0]\" receive-shadow>\r\n \u003CTresPlaneGeometry :args=\"[10, 10, 10, 10]\" />\r\n \u003CTresMeshToonMaterial />\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" :intensity=\"1\" cast-shadow />\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n```\r\n\r\n- [ ] Using a vite plugin to generate all the components from THREE instances (Except Scene)\r\n- [ ] Each component should locally register components on the slots (is possible?)\r\n- [ ] Typescript Definition for the components generated from the ThreeJS instance\r\n- [ ] Include them in the final bundle\r\n- [ ] Strategy for replacing catalog `extend` \r\n- [ ] Update the way `cientos` extends the catalog\r\n",[],"Generate instances on build-time rather than run-time","2023-03-13T14:26:46Z","https://github.com/Tresjs/tres/issues/104",0.7674628,{"description":2918,"labels":2919,"number":2923,"owner":2871,"repository":2897,"state":2883,"title":2924,"updated_at":2925,"url":2926,"score":2927},"**Is your feature request related to a problem? Please describe.**\r\nAt the moment there is no working way of implementing particles using `\u003CTresBufferGeometry />`, especially attributes.\r\n\r\n**Describe the solution you'd like**\r\nA way of replicate this\r\n\r\n```\r\nconst firefliesGeometry = new THREE.BufferGeometry()\r\nconst firefliesCount = 30\r\nconst positionArray = new Float32Array(firefliesCount * 3)\r\n\r\nfor(let i = 0; i \u003C firefliesCount; i++)\r\n{\r\n positionArray[i * 3 + 0] = Math.random() * 4\r\n positionArray[i * 3 + 1] = Math.random() * 4\r\n positionArray[i * 3 + 2] = Math.random() * 4\r\n}\r\n\r\nfirefliesGeometry.setAttribute('position', new THREE.BufferAttribute(positionArray, 3))\r\n\r\n// Material\r\nconst firefliesMaterial = new THREE.PointsMaterial({ size: 0.1, sizeAttenuation: true })\r\n\r\nconst fireflies = new THREE.Points(firefliesGeometry, firefliesMaterial)\r\nscene.add(fireflies)\r\n``` \r\n\r\n\r\n**Suggested solution**\r\nSimilar to R3F \r\n\r\n```\r\n \u003Cpoints ref={geom} position={[0, 10, 0]} rotation={[-Math.PI / 4, 0, Math.PI / 6]}>\r\n \u003CbufferGeometry>\r\n \u003CbufferAttribute attachObject={[\"attributes\", \"position\"]} count={coords.length / 3} array={coords} itemSize={3} />\r\n \u003CbufferAttribute attachObject={[\"attributes\", \"size\"]} count={sizes.length} array={sizes} itemSize={1} />\r\n \u003C/bufferGeometry>\r\n \u003CdotMaterial />\r\n \u003C/points>\r\n```\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[2920],{"name":2921,"color":2922},"feature","c2e0c6",56,"BufferGeometry and BufferAttribute support","2022-12-22T10:31:58Z","https://github.com/Tresjs/tres/issues/56",0.7698693,{"description":2929,"labels":2930,"number":2934,"owner":2871,"repository":2897,"state":2883,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Description\r\n\r\nAs the author and maintainer of TresJS, I would like to simplify and clean the custom renderer `nodeOps` to make the code more readable and easier to maintain.\r\n\r\nAt, we are using overpopulation the property [userData](https://threejs.org/docs/#api/en/core/Object3D.userData) for the scene and objects on the scene graph as a workaround for accessing state or adding extra properties and methods that we need for TresJS nodeOps like this:\r\n\r\n` scene.userData.tres__registerAtPointerEventHandler = registerObject`\r\n\r\n`userData` is a property that the end-user can also use, we need to add the `.tres__` prefix to avoid naming collisions, adding an extra cognitive load to the code.\r\n\r\nCode ends up being kind of difficult to read:\r\n\r\n```ts\r\nremove(node) {\r\n if (!node) return\r\n // remove is only called on the node being removed and not on child nodes.\r\n\r\n if (node.isObject3D) {\r\n const object3D = node as unknown as Object3D\r\n\r\n const disposeMaterialsAndGeometries = (object3D: Object3D) => {\r\n const tresObject3D = object3D as TresObject3D\r\n\r\n if (!object3D.userData.tres__materialViaProp) {\r\n tresObject3D.material?.dispose()\r\n tresObject3D.material = undefined\r\n }\r\n\r\n if (!object3D.userData.tres__geometryViaProp) {\r\n tresObject3D.geometry?.dispose()\r\n tresObject3D.geometry = undefined\r\n }\r\n }\r\n\r\n const deregisterAtPointerEventHandler = scene?.userData.tres__deregisterAtPointerEventHandler\r\n const deregisterBlockingObjectAtPointerEventHandler\r\n = scene?.userData.tres__deregisterBlockingObjectAtPointerEventHandler\r\n\r\n const deregisterAtPointerEventHandlerIfRequired = (object: TresObject) => {\r\n\r\n if (!deregisterBlockingObjectAtPointerEventHandler)\r\n throw 'could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene\\'s userData'\r\n\r\n scene?.userData.tres__deregisterBlockingObjectAtPointerEventHandler?.(object as Object3D)\r\n\r\n if (!deregisterAtPointerEventHandler)\r\n throw 'could not find tres__deregisterAtPointerEventHandler on scene\\'s userData'\r\n\r\n if (\r\n object && supportedPointerEvents.some(eventName => object[eventName])\r\n )\r\n deregisterAtPointerEventHandler?.(object as Object3D)\r\n }\r\n\r\n const deregisterCameraIfRequired = (object: Object3D) => {\r\n const deregisterCamera = scene?.userData.tres__deregisterCamera\r\n\r\n if (!deregisterCamera)\r\n throw 'could not find tres__deregisterCamera on scene\\'s userData'\r\n\r\n if ((object as Camera).isCamera)\r\n deregisterCamera?.(object as Camera)\r\n }\r\n\r\n node.removeFromParent?.()\r\n object3D.traverse((child: Object3D) => {\r\n disposeMaterialsAndGeometries(child)\r\n deregisterCameraIfRequired(child)\r\n deregisterAtPointerEventHandlerIfRequired?.(child as TresObject)\r\n })\r\n\r\n disposeMaterialsAndGeometries(object3D)\r\n deregisterCameraIfRequired(object3D)\r\n deregisterAtPointerEventHandlerIfRequired?.(object3D as TresObject)\r\n }\r\n\r\n node.dispose?.()\r\n },\r\n ``` \r\n\r\n### Suggested solution\r\n\r\nAdd a local state for each instance called `__tres` which contains:\r\n\r\n```ts\r\nexport interface LocalState = {\r\n type: string\r\n // objects and parent are used when children are added with `attach` instead of being added to the Object3D scene graph\r\n objects: Instance[]\r\n parent: Instance | null\r\n primitive?: boolean\r\n eventCount: number\r\n handlers: Partial\u003CEventHandlers>\r\n memoizedProps: { [key: string]: any }\r\n}\r\n```\r\n\r\n```ts\r\nexport interface TresObject3D extends THREE.Object3D\u003CTHREE.Object3DEventMap> {\r\n geometry?: THREE.BufferGeometry & TresBaseObject\r\n material?: THREE.Material & TresBaseObject\r\n __tres: LocalState\r\n}\r\n```\r\n\r\nWe could include the context of TresContextProvider on the scene object to handle the register of cameras and event handlers or even inside each LocalState on a potential property `root`\r\n\r\n```ts\r\nexport type LocalState = {\r\n type: string\r\n // objects and parent are used when children are added with `attach` instead of being added to the Object3D scene graph\r\n root: TresContext,\r\n objects: Instance[]\r\n parent: Instance | null\r\n primitive?: boolean\r\n eventCount: number\r\n handlers: Partial\u003CEventHandlers>\r\n memoizedProps: { [key: string]: any }\r\n}\r\n```\r\n\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://tresjs.org/guide).\r\n- [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.",[2931],{"name":2932,"color":2933},"v4","7980EA",516,"LocalState for custom renderer node instances instead of userData","2024-04-03T06:58:19Z","https://github.com/Tresjs/tres/issues/516",0.7705097,{"description":2940,"labels":2941,"number":2942,"owner":2871,"repository":2897,"state":2883,"title":2943,"updated_at":2944,"url":2945,"score":2946},"## Problem\r\n\r\nAs of PR ([80f8a2e](https://github.com/Tresjs/tres/commit/80f8a2e664e2100f9d0dabf507a213aae524f1de)), some playgrounds are broken. And user code is likely also broken.\r\n\r\nBroken playground example:\r\n\r\nhttp://localhost:5173/events/dynamic-objects\r\n\r\n### Error:\r\n\r\n```ts\r\nUncaught (in promise) TypeError: props is null\r\n createElement nodeOps.ts:34\r\n```\r\n\r\nHere's the problem line in `src/nodeOps.ts`:\r\n\r\n```ts\r\n function createElement(tag: string, _isSVG: undefined, _anchor: any, props: Partial\u003CWithMathProps\u003CTresObject>> = {}): TresObject | null {\r\n```\r\n\r\nThe signature was changed from the [signature in the Vue docs](https://vuejs.org/api/custom-renderer.html):\r\n\r\n```ts\r\n createElement(\r\n type: string,\r\n isSVG?: boolean,\r\n isCustomizedBuiltIn?: string,\r\n vnodeProps?: (VNodeProps & { [key: string]: any }) | null\r\n ): HostElement\r\n```\r\n\r\nThe new signature isn't equivalent. The docs' version says Vue can pass `null` for `props`. \r\n\r\nBut if `nodeOps.createElement` gets an explicit `null`, it throws on the next line when checking `if (!props.args)`.\r\n\r\n## Solution\r\n\r\nRevert the signature and readd the check for null `props`.\r\n\r\n### Reproduction\r\n\r\nN/A - see above\r\n\r\n### Steps to reproduce\r\n\r\n* Check out [80f8a2e](https://github.com/Tresjs/tres/commit/80f8a2e664e2100f9d0dabf507a213aae524f1de) – or, at the moment, check out the `main` Tres branch.\r\n* `pnpm dev`\r\n* Navigate to http://localhost:5173/events/dynamic-objects\r\n* See error in console:\r\n\r\n### System Info\r\n\r\n```shell\r\nN/A\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nnpm\r\n\r\n### Code of Conduct\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://tresjs.org/guide).\r\n- [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.\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],827,"`nodeOps.createElement` throws when `props === null`","2024-09-08T12:49:26Z","https://github.com/Tresjs/tres/issues/827",0.7713307,{"description":2948,"labels":2949,"number":2954,"owner":2871,"repository":2905,"state":2883,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Description\r\n\r\nAs a developer using TresJS, I want \r\n- Environment props to be reactive\r\n- More presets other than 'sunset' (city, etc)\r\n\r\n so that:\r\n- I can dynamically configure the preset or toggle the `background` property\r\n\r\n### Suggested solution\r\n\r\nModify the `useEnvironment/component.ts` component so:\r\n\r\n- Convert to vue file SFC\r\n- texture should be a ref\r\n- Set the default for the props here.\r\n\r\nModify the `useEnvironment/index.ts` composable so:\r\n\r\n- Reacts to prop changes (Using watchers and computed)\r\n- Return the texture as a ref\r\n\r\n \r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.",[2950,2953],{"name":2951,"color":2952},"good first issue","7057ff",{"name":2892,"color":2893},147,"Enhance Environment and useEnvironment abstractions","2023-10-09T17:33:47Z","https://github.com/Tresjs/cientos/issues/147",0.77364963,{"description":2960,"labels":2961,"number":2954,"owner":2871,"repository":2882,"state":2883,"title":2971,"updated_at":2972,"url":2973,"score":2958},"Attempting to use the 1.0.0 release with Nuxt, I get an error on the `nuxt prepare` step. This is reproducible within this repo's nuxt playground if you update the dependency to 1.0.0.\r\n\r\n```\r\n ERROR ENOENT: no such file or directory, open '/Users/.../.../post-processing/playground-nuxt/@tresjs/post-processing' 10:29:39 AM\r\n ```\r\n\r\nThis does not happen when using `1.0.0-next.1`.\r\n\r\n```\r\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.14.1592\r\n- CLI Version: 3.15.0\r\n- Nitro Version: 2.10.4\r\n- Package Manager: npm@10.8.3\r\n- Builder: -\r\n- User Config: default\r\n- Runtime Modules: @nuxt/eslint@0.7.2, @pinia/nuxt@0.7.0, @nuxtjs/supabase@1.4.3, @primevue/nuxt-module@4.2.4, @nuxtjs/tailwindcss@6.12.2, nuxt-lodash@2.5.3, @nuxt/icon@1.8.2, @tresjs/nuxt@3.0.7\r\n- Build Modules: -\r\n```\r\n\r\nThanks for maintaining this project!",[2962,2965,2968],{"name":2963,"color":2964},"bug","d73a4a",{"name":2966,"color":2967},"p4-important-bug","D93F0B",{"name":2969,"color":2970},"types","5C076E","Broken imports in v1.0.0 w/ Nuxt","2025-01-03T09:37:19Z","https://github.com/Tresjs/post-processing/issues/147",["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOxGfZAkCm_GukxQgAwm3_3vtOk3dj0edEW9iTpOkO1g":-1},"/Tresjs/tres/121"]