\r\n\r\n \u003Cdiv class=\"wrapper\">\r\n \u003CHelloWorld msg=\"You did it!\" />\r\n\r\n \u003Cnav>\r\n \u003CRouterLink to=\"/\">Home\u003C/RouterLink>\r\n \u003CRouterLink to=\"/about\">About\u003C/RouterLink>\r\n \u003C/nav>\r\n \u003C/div>\r\n \u003C/header>\r\n\r\n \u003CRouterView />\r\n\u003C/template>\r\n\r\n\u003Cstyle scoped>\r\n\r\n\u003C/style>\r\n```\r\n\r\nAboutView\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"about\">\r\n \u003Ch1>This is an about page\u003C/h1>\r\n \u003Cdiv class=\"canvas\">\r\n \u003CTresCanvas>\r\n \u003C!-- Your scene here -->\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core'\r\n\u003C/script>\r\n\u003Cstyle>\r\n@media (min-width: 1024px) {\r\n .about {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n}\r\n.canvas {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction\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: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-1355U\r\n Memory: 1.70 GB / 7.76 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node\r\n npm: 11.0.0 - ~/.nvm/versions/node/v20.18.0/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.3 \r\n @tresjs/core: ^4.3.2 => 4.3.2 \r\n vite: ~6.0.6 => 6.0.6\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.",[2867],{"name":2868,"color":2869},"bug","d73a4a",905,"Tresjs","tres","open","I get an error when using TresCanvas. Like this .. ( onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can... )","2025-02-08T10:41:31Z","https://github.com/Tresjs/tres/issues/905",0.74164414,{"description":2879,"labels":2880,"number":2884,"owner":2871,"repository":2885,"state":2873,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### Description\r\n\r\nGood controls for presentation purposes\r\n\r\n### Suggested solution\r\n\r\nhttps://drei.docs.pmnd.rs/controls/presentation-controls#presentationcontrols\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.",[2881],{"name":2882,"color":2883},"good first issue","7057ff",108,"cientos","Presentation Controls","2024-11-26T07:08:48Z","https://github.com/Tresjs/cientos/issues/108",0.74403566,{"description":2891,"labels":2892,"number":2902,"owner":2871,"repository":2872,"state":2873,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Description\n\nWebGPU [Three.js r171](https://github.com/mrdoob/three.js/releases) has been released and it’s a major milestone for WebGPU integration with third-party libraries such as React Three Fiber and bundlers like Vite or Next.js. We can now do this with zero configuration:\r\n\r\nThree.js Vanilla Three.js\r\n\r\n```ts\r\nimport * as THREE from 'three'\r\nimport { WebGPURenderer } from 'three/webgpu'\r\n \r\nconst renderer = new WebGPURenderer()\r\n```\r\n\r\nR3F\r\n\r\n```ts\r\nimport { Canvas } from '@react-three/fiber'\r\nimport { WebGPURenderer } from 'three/webgpu'\r\n \r\n\u003CCanvas gl={canvas => new WebGPURenderer({ canvas })}>\r\n```\n\n### Suggested solution\n\nEnable a `renderer` prop to override the renderer, restricted to canvas-based WebGL/WebGPU renderers.\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport { WebGPURenderer } from 'three/webgpu'\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas :renderer=\"WebGPURenderer\" />\r\n\u003C/template>\r\n```\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.",[2893,2896,2899],{"name":2894,"color":2895},"feature","c2e0c6",{"name":2897,"color":2898},"p3-significant","2C78E3",{"name":2900,"color":2901},"v5","EFC959",883,"WebGPU support","2025-02-06T09:35:42Z","https://github.com/Tresjs/tres/issues/883",0.7440598,{"description":2908,"labels":2909,"number":2913,"owner":2871,"repository":2914,"state":2873,"title":2915,"updated_at":2916,"url":2917,"score":2918},"Inspiration \r\n\r\nhttps://codepen.io/prisoner849/pen/poNXPyv\r\n\r\n\r\n",[2910],{"name":2911,"color":2912},"demo","CAC7AC",84,"lab","Light Bloom example","2023-12-15T13:49:28Z","https://github.com/Tresjs/lab/issues/84",0.75332385,{"description":2920,"labels":2921,"number":217,"owner":2871,"repository":2929,"state":2873,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Description\n\nAfter the initial, what about creating abstraction/component like in cientos but that only works with physics\n\n### Suggested solution\n\nLike Attractor in r3f\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/rapier/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/rapier/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://rapier.tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/rapier/issues) that reports the same bug to avoid creating a duplicate.",[2922,2923,2926],{"name":2894,"color":2895},{"name":2924,"color":2925},"investigation","D03599",{"name":2927,"color":2928},"p2-nice-to-have","D4C5F9","rapier","Cloth simmulator","2024-10-04T10:54:33Z","https://github.com/Tresjs/rapier/issues/135",0.77182287,{"description":2935,"labels":2936,"number":2941,"owner":2871,"repository":2885,"state":2873,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### Describe the bug\r\n\r\nSome controls have long-standing bugs where changing props causes duplicate events to be added. \r\n\r\nE.g., flipping makeDefault in CameraControls causes duplicate events to be added. This will add 100 duplicate events:\r\n\r\n```\r\nconst makeDefault = shallowRef(true)\r\n// Flip `makeDefault` 100 times, add 100 events! Lol\r\nArray.from({length: 100}).fill(0).forEach(\r\n (_, i) => setTimeout(\r\n () => {\r\n makeDefault.value = !makeDefault.value\r\n }, i * 1000 / 25)\r\n)\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresLeches />\r\n \u003CTresCanvas v-bind=\"gl\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CCameraControls\r\n v-bind=\"controlsState\"\r\n ref=\"controlsRef\"\r\n :make-default=\"makeDefault\"\r\n @change=\"onChange\"\r\n @start=\"onStart\"\r\n @end=\"onEnd\"\r\n />\r\n \r\n```\r\n \r\n \r\nThat means every time these emits would be expected to fire once, they're fired 100 times:\r\n\r\n```\r\nfunction addEventListeners() {\r\n useEventListener(controlsRef.value as any, 'update', () => {\r\n emit('change', controlsRef.value)\r\n invalidateOnDemand()\r\n })\r\n useEventListener(controlsRef.value as any, 'controlend', () => emit('end', controlsRef.value))\r\n useEventListener(controlsRef.value as any, 'controlstart', () => emit('start', controlsRef.value))\r\n}\r\n```\r\n\r\nThe problem is the anonymous functions:\r\n\r\nNote: If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an addEventListener call, the second function will also be added to the list of event listeners for that target.\r\n\r\nIndeed, anonymous functions are not identical even if defined using the same unchanging source-code called repeatedly, even if in a loop.\r\n\r\nRepeatedly defining the same unnamed function in such cases can be problematic. (See Memory issues, below.)\r\n\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\r\nMDN Web Docs\r\n[EventTarget: addEventListener() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\r\nThe addEventListener() method of the EventTarget interface\r\nsets up a function that will be called whenever the specified event is delivered to the target.\r\n\r\n### Reproduction\r\n\r\nN/A\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/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.",[2937,2938],{"name":2868,"color":2869},{"name":2939,"color":2940},"p3-minor-bug","F28C37",457,"useEventListener bug in controls","2024-07-24T06:42:25Z","https://github.com/Tresjs/cientos/issues/457",0.774278,{"description":2947,"labels":2948,"number":2949,"owner":2871,"repository":2950,"state":2873,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Description\r\n\r\nAs a developer using Tres Nuxt devtools I would like to be able to modify object values from the devtools directly and visualize the changes on the scene in real time.\r\n\r\n### Suggested solution\r\n\r\nAn `action` hook is gonna be potentially implemented in https://github.com/Tresjs/tres/issues/478\r\n\r\nIntroduce an editable functionality on the devtools so values become inputs and attach the event to the change of the value\r\n\r\n```ts\r\nwindow.__TRES__DEVTOOLS__.action(\r\n {\r\n type: 'tres:edit'\r\n payload: {\r\n object: //obj uuid\r\n property: 'position.x'\r\n value: 2\r\n }\r\n }\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.",[],73,"nuxt","Devtools edit scene object values","2024-04-11T14:13:36Z","https://github.com/Tresjs/nuxt/issues/73",0.78454304,{"description":2956,"labels":2957,"number":2959,"owner":2871,"repository":2872,"state":2960,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Description\r\n\r\nAs a developer using TresJS ...\r\n\r\n## Problem\r\n\r\nI forget to `lint --fix` before pushing. Others do too. This leads to messier commit histories, noisier diffs, and wasted time.\r\n\r\n## Suggested solution\r\n\r\nAdd a client-side pre-push [git hook](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) to `lint --fix` the project and abort the push if errors exist. \r\n\r\nBy default, the hook would run `lint --fix` during a push, before any objects have been transferred.\r\n\r\nIf there are no linter errors after running `lint --fix`, it would:\r\n\r\n* continue the push\r\n\r\nIf there are unfixable-by-the-linter errors, it would:\r\n\r\n* abort the push\r\n* report the errors (or filenames with errors) and instruct the user to fix them \r\n* give the user instructions for bypassing the linter step and pushing despite errors\r\n\r\n## Advantages\r\n\r\n* Reduce the number of PRs that fail the CI lint step\r\n* Reduce the amount of diff \"noise\" due to `chore(lint): fix linter errors`\r\n* Reduce mental load when pushing – no need to remember to lint\r\n\r\n## Disadvantages\r\n\r\n* Some new contributors might be turned away. E.g. maybe the linter fails and they can't figure out the next step.\r\n* If linter errors make it into `main`, everyone's `git push` based on the branch will initially fail.\r\n* `pnpm lint --fix` takes a while to run.\r\n\r\n### Alternative\r\n\r\nDo nothing. Keep the project as-is.\r\n\r\n### Additional context\r\n\r\nThe project runs a linter as a CI step and fails unlinted PRs already.\r\n\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.",[2958],{"name":2927,"color":2928},590,"closed","Git pre-push hook to `lint --fix` the project","2024-04-07T23:51:17Z","https://github.com/Tresjs/tres/issues/590",0.7319575,{"description":2966,"labels":2967,"number":2968,"owner":2871,"repository":2914,"state":2960,"title":2969,"updated_at":2970,"url":2971,"score":2972},"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,"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.75612754,{"description":2974,"labels":2975,"number":2976,"owner":2871,"repository":2872,"state":2960,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Describe the bug\n\nCurrent type definitions don't allow for a function to be passed to the `ref` prop of a component, so any time you use a [functional ref](https://vuejs.org/guide/essentials/template-refs.html#function-refs) you'll run into a type error.\r\n\r\nApologies for not including a reproduction or sample but this should be quick to recreate in any dev environment with the reproduction steps.\n\n### Reproduction\n\n/\n\n### Steps to reproduce\n\n1. Install tresjs in any project\r\n2. Add TresCanvas\r\n3. Add new ref, and function to populate ref \r\n`const sphereRefs = ref\u003CObject3D[]>([]);`\r\n`const setSphereRefs = (el: any) => {\r\n if (el && !sphereRefs.value.includes(el)) {\r\n sphereRefs.value.push(el);\r\n }\r\n};`\r\n4. Add TresGroup, TresMesh, etc...\r\n5. Pass a function to the `ref` property `:ref=\"(el) => \"setSphereRef(el)\"`\r\n6. Type error pops up indicating this isn't a valid value for the `ref` prop despite this being a common use for the `ref` prop.\n\n### System Info\n\n_No response_\n\n### Used Package Manager\n\nyarn\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.",[],427,"ref prop missing type for functional ref","2023-10-30T10:34:55Z","https://github.com/Tresjs/tres/issues/427",0.767112,["Reactive",2982],{},["Set"],["ShallowReactive",2985],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRSlkDsMfJO-4Wtn_lafWALDYJxrGqTOdi6595m7rIB8":-1},"/Tresjs/cientos/594"]