`](https://github.com/pmndrs/drei/blob/514be0d1ff88b43c07cf246da9dca3517ea14d9a/src/core/Instances.tsx#L22)\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\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.",[2867,2870],{"name":2868,"color":2869},"feature","c2e0c6",{"name":2871,"color":2872},"p2-nice-to-have","D4C5F9",342,"Tresjs","cientos","open","Equivalent of Three.js's `InstancedMesh`","2024-04-02T09:44:50Z","https://github.com/Tresjs/cientos/issues/342",0.6942207,{"description":2882,"labels":2883,"number":2890,"owner":2874,"repository":2891,"state":2876,"title":2892,"updated_at":2893,"url":2894,"score":2895},"### Description\n\nDocs need a little bit of caring for v4\r\nSame for playgrounds\n\n### Suggested solution\n\n- [ ] Remove playground section on https://docs.tresjs.org/guide/#playground\r\n- [x] Remove basic demos from playground https://playground.tresjs.org/\r\n- [ ] Move Events demo from playground to docs (use sandbox)\r\n- [ ] Change naming sandbox to playground\r\n- [ ] Playground is gonna be Showcase/MadeWithTres\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://tresjs.org/guide).\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.",[2884,2887],{"name":2885,"color":2886},"docs","0075ca",{"name":2888,"color":2889},"v4","7980EA",494,"tres","Improvements Docs","2024-03-28T11:19:18Z","https://github.com/Tresjs/tres/issues/494",0.7103544,{"description":2897,"labels":2898,"number":2908,"owner":2874,"repository":2891,"state":2876,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### Describe the bug\n\nI tried writing this code in `tresjs v 4.0.2`\r\n```vue \u003CTresGroup>\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003COrbitControls />\r\n \u003CTresAmbientLight :intensity=\"0.5\" color=\"red\" />\r\n \u003CTresMesh ref=\"boxRef\" :position=\"[0, 2, 0]\">\r\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" :intensity=\"1\" cast-shadow />\r\n \u003CTresAxesHelper />\r\n \u003CTresGridHelper :args=\"[10, 10, 0x444444, 'teal']\" />\r\n \u003C/TresGroup>\r\n````\r\nThen I got this\r\n\r\n\r\n**However, it can run correctly in `v3.9.0`**\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/hexianWeb/starter\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n_No response_\n\n### Used Package Manager\n\npnpm\n\n### Code of Conduct\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://tresjs.org/guide).\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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2899,2902,2905],{"name":2900,"color":2901},"question","d876e3",{"name":2903,"color":2904},"waiting for author","B145BC",{"name":2906,"color":2907},"p2-edge-case","ABCC40",727,"`Camera` wrapped by `TresGroup` cannot be used properly after `version 4.0`","2024-06-15T11:45:11Z","https://github.com/Tresjs/tres/issues/727",0.72895813,{"description":2914,"labels":2915,"number":2916,"owner":2874,"repository":2875,"state":2876,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### Description\n\nAs a developer using TresJS / cientos, I would like to have a TrackballControls component similar to OrbitControls.\n\nsee Threejs: https://threejs.org/docs/#examples/en/controls/TrackballControls\n\n### Suggested solution\n\nSince the TrackballControl source is very similar to OrbitControl, I took the source of OrbitControls.vue.d.ts and adjusted it slightly. That version works in my application and I can use it directly like OrbitControls.\n\n`\n\u003CTresCanvas\">\n \u003CTresPerspectiveCamera/>\n \u003CVisuTrackBallControls />\n \u003C/TresPerspectiveCamera>\n \u003C/TresCanvas>\n`\n\n[VisuTrackBallControls.vue.txt](https://github.com/user-attachments/files/18799562/VisuTrackBallControls.vue.txt)\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\n- [x] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\n- [x] Read the [docs](https://cientos.tresjs.org/guide).\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.",[],595,"Add TrackballControls to Cientos","2025-02-14T13:18:40Z","https://github.com/Tresjs/cientos/issues/595",0.7353368,{"description":2922,"labels":2923,"number":2924,"owner":2874,"repository":2891,"state":2876,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Description\n\nThis allows to prevent bubbling the events to the dom by using `event.sourceEvent.preventDefault();`\n\n### Suggested solution\n\nAdd event capture true by default, or allow us to add parameters to the listeners: `@click.stop`, `@click.passive`, `@click.capture`, ...\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\n- [x] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\n- [x] Read the [docs](https://tresjs.org/guide).\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.",[],939,"Add event capture true by default","2025-02-22T10:19:27Z","https://github.com/Tresjs/tres/issues/939",0.73854697,{"description":2930,"labels":2931,"number":2938,"owner":2874,"repository":2891,"state":2939,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### Describe the bug\n\nFirst of all, thanks @alvarosabu for implementing #806.\r\n\r\nI went to try it out today, but it wasn't working. After some debugging, I realized it's because we are using [Symbol keys](https://vuejs.org/guide/components/provide-inject#working-with-symbol-keys) for many of our provides.\r\n\r\n`Object.entries` only includes string-keyed properties, so the Symbol-keyed properties are not included.\r\n\r\nEither `Object.getOwnPropertySymbols` or `Reflect.ownKeys` should be able to at least get the symbol keys.\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-wkbbis?file=src%2FApp.vue,src%2Fcomponents%2FTheExperience.vue,src%2Fcomponents%2FSubComponent.vue,package.json\n\n### Steps to reproduce\n\nRun the Stackblitz project (`npm install && npm run dev`) if not automatically run.\r\n\r\nThe console will have the following log messages:\r\n\r\n```\r\nTheExperience.vue string-keyed string-keyed\r\nTheExperience.vue symbol-keyed symbol-keyed\r\n```\r\n\r\nThese are the values of two injections provided in `App.vue`.\r\n\r\nClicking the box logs the following:\r\n\r\n```\r\nSubComponent.vue string-keyed string-keyed\r\nSubComponent.vue symbol-keyed undefined\r\n```\r\n\r\nAs the symbol-keyed provision can not be read inside the `TresCanvas`.\n\n### System Info\n\n_No response_\n\n### Used Package Manager\n\nnpm\n\n### Code of Conduct\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://tresjs.org/guide).\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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2932,2935],{"name":2933,"color":2934},"bug","d73a4a",{"name":2936,"color":2937},"p4-important-bug","D93F0B",849,"closed","Provide/Inject from Vue component not working with Symbol keys","2024-10-12T14:15:04Z","https://github.com/Tresjs/tres/issues/849",0.70663255,{"description":2945,"labels":2946,"number":2956,"owner":2874,"repository":2875,"state":2939,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### Description\r\n\r\nAs a developer using `@tresjs/cientos` I would like to benefit from the new composable and loop logic introduced in v4 https://github.com/Tresjs/tres/pull/673 \r\n\r\n### Suggested solution\r\n\r\nUpdate the following abstractions\r\n\r\n- [x] Stats.ts\r\n- [x] StatsGL\r\n- [x] Ocean\r\n- [x] Smoke\r\n- [ ] useEnvironment\r\n- [ ] BakeShadows\r\n- [x] Html\r\n- [x] KeyboardControls\r\n- [ ] ContactShadows\r\n- [x] Levioso\r\n- [x] ScrollControls\r\n- [x] useAnimations\r\n- [x] Precipitation\r\n- [x] HolographicMaterial\r\n- [x] MeshWobbleMaterial\r\n- [x] OrbitControls\r\n- [x] MouseParallax\r\n- [x] CameraControls\r\n- [ ] MeshReflectionMaterial\r\n- [ ] Sparkles\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.",[2947,2948,2950,2953],{"name":2868,"color":2869},{"name":2888,"color":2949},"EEF2B0",{"name":2951,"color":2952},"breaking-change","5319E7",{"name":2954,"color":2955},"p3-significant","2C78E3",421,"Adapt abstractions to `useLoop` instead of `useRenderLoop`","2024-08-28T19:21:42Z","https://github.com/Tresjs/cientos/issues/421",0.71287936,{"description":2962,"labels":2963,"number":2966,"owner":2874,"repository":2875,"state":2939,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Description\r\n\r\nKeyboardControls could be improved.\r\n\r\nCurrently, is not supporting [magic keys](https://vueuse.org/core/useMagicKeys/#usemagickeys). And remove the 2D mode\r\nCould use the camera as a group (like in the MouseParallax) for the jump function, and the headBobbing, and avoid fighting with cameras\r\nImprove the usability for thirdCamera Games\r\n\r\n\r\n### Suggested solution\r\n\r\n.\r\n\r\n### Alternative\r\n\r\nAny other alternative is considered\r\n\r\nWe don't take mobile functionality here, that will be in another issue\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.",[2964,2965],{"name":2888,"color":2949},{"name":2951,"color":2952},227,"Improve KeyboardControls","2024-09-04T13:43:10Z","https://github.com/Tresjs/cientos/issues/227",0.7141869,{"description":2972,"labels":2973,"number":2974,"owner":2874,"repository":2891,"state":2939,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### Describe the bug\r\n\r\nFor class [`Material`](https://threejs.org/docs/index.html#api/en/materials/Material) we have [onBeforeCompile ](https://threejs.org/docs/index.html#api/en/materials/Material.onBeforeCompile)method, R3f provide onBeforeCompile prop to use that ([example](https://codesandbox.io/s/r3f-basic-demo-forked-ftwcm)), and I think Tresjs should have something like this.\r\n\r\nI tried to use `@beforeCompile` will warn \r\n\r\n\r\nand `onBeforeCompile` both don't work, I guess this might be a bug or this is a feature doesn't implement yet?\r\n\r\nI provide a reproduction with a Codesandbox copy from [the official playground](https://github.com/Tresjs/playground/tree/main/components/content/basic-shaders), just run and see no stdout which should have\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/sandbox/hopeful-goodall-y86d74?file=%2Fsrc%2FApp.vue%3A44%2C9\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n_No response_\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.",[],360,"onBeforeCompile prop of material doesn't work","2024-05-05T16:00:38Z","https://github.com/Tresjs/tres/issues/360",0.7175988,{"description":2980,"labels":2981,"number":2982,"owner":2874,"repository":2983,"state":2939,"title":2984,"updated_at":2985,"url":2986,"score":2987},"Hello\r\n\r\nThanks for the great work. Just started with Tres in Vue, and love it, but I'm getting the two below warnings in Chrome when loading and animating a gltf model, using your approach here to load the model : https://docs.tresjs.org/cookbook/load-models.html#using-usegltf\r\n\r\n**The Warnings:**\r\n\r\nchunk-RZFXUODE.js?v=c85fe90a:33228 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952\r\n\r\nmain.js:5 [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.\r\n\r\nThe warnings vanish if I don't include my HeroBackgroundTres component (ok, have to come up with a better name for it)\r\n\r\n**HeroBackgroundTres.vue code:**\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core';\r\nimport Model from '@/model/Model.vue';\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"tres-wrapper\">\r\n \u003CTresCanvas>\r\n \u003CTresPerspectiveCamera :position=\"[-3, -2, 4]\" />\r\n \u003CSuspense>\r\n \u003CModel />\r\n \u003C/Suspense>\r\n \u003CTresDirectionalLight :intensity=\"2\" />\r\n \u003CTresAmbientLight :intensity=\"1\" />\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\n.tres-wrapper {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n**Model.vue**\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useTresContext } from '@tresjs/core'\r\nimport { useGLTF } from '@tresjs/cientos';\r\nimport { useLoop } from '@tresjs/core';\r\nimport { shallowRef } from 'vue';\r\n\r\nconst boxRef = shallowRef();\r\nconst context = useTresContext();\r\nconst path = './src/assets/gltf/scene.gltf';\r\nconst { scene, nodes, animations, materials } = await useGLTF(path, { draco: true });\r\n\r\nconst { onBeforeRender } = useLoop();\r\n\r\nonBeforeRender(({ delta, elapsed }) => {\r\n if (boxRef.value) {\r\n boxRef.value.rotation.y += delta\r\n boxRef.value.rotation.z = elapsed * 0.2\r\n }\r\n})\r\n\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cprimitive :object=\"scene\" ref=\"boxRef\" />\r\n\u003C/template>\r\n```\r\nThankful for any insights as I get a slight rash from yellow warnings. Again, Tres is great, keep up the fine work \r\n\r\n.T 😎",[],214,"lab","Two Warnings in Chrome when using gltf Model approach to load and run","2024-12-14T13:52:53Z","https://github.com/Tresjs/lab/issues/214",0.71815,["Reactive",2989],{},["Set"],["ShallowReactive",2992],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCzi_R83NCh29F0jNI8S9WpbeyEuT9MVsVp8qOeJCTz4":-1},"/Tresjs/tres/297"]