\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.",[2887],{"name":2888,"color":2889},"bug","d73a4a",905,"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.71144706,{"description":2896,"labels":2897,"number":2902,"owner":2868,"repository":2879,"state":2870,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Describe the bug\n\nI used Line2 to add a point to the props.points, but it doesn't seem to render. \r\nSpecifically, points larger than the original array were not rendered, but points smaller than the original array were re rendered\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-kftrax?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n_No response_\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/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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2898,2899],{"name":2888,"color":2889},{"name":2900,"color":2901},"p2-nice-to-have","D4C5F9",493,"Line2,Modify props.points, but it does not take effect","2024-10-17T16:25:41Z","https://github.com/Tresjs/cientos/issues/493",0.71646225,{"description":2908,"labels":2909,"number":2914,"owner":2868,"repository":2879,"state":2870,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Describe the bug\n\nThe examples under https://cientos.tresjs.org/guide/misc/html-component.html#html are currently broken\n\n### Reproduction\n\nhttps://cientos.tresjs.org/guide/misc/html-component.html#html\n\n### Steps to reproduce\n\n_No response_\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/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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2910,2911],{"name":2888,"color":2889},{"name":2912,"color":2913},"docs","0075ca",368,"[Docs] - HTML examples are broken ","2024-07-18T08:07:36Z","https://github.com/Tresjs/cientos/issues/368",0.71674037,{"description":2920,"labels":2921,"number":2923,"owner":2868,"repository":2879,"state":2924,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Describe the bug\n\nIf Levioso's `speed` prop is updated, it leads to (likely) unwanted behavior.\r\n\r\nHere it's changed over time:\r\n\r\nhttps://github.com/Tresjs/cientos/assets/20469369/876fdff9-6e45-43b2-a6ef-2440cb8d3508\r\n\r\nThe problem is [here](https://github.com/Tresjs/cientos/blob/cc3f3e98a4d0bb9fd22a2120fa529a7db081b5cf/src/core/abstractions/Levioso.vue#L34C1-L40C60):\r\n\r\n````\r\nonLoop(({ elapsed }) => {\r\n if (!groupRef.value) return\r\n\r\n const theta = offset.value + elapsed\r\n groupRef.value.rotation.x = (Math.cos((theta / 4) * props.speed) / 8) * props.rotationFactor\r\n [ ... ]\r\n````\r\n\r\nDoing a quick substitution and dropping the divisors and `offset`, we have:\r\n\r\n```\r\ntheta = elapsed * props.speed\r\n```\r\n\r\nSo `props.speed` scales `elapsed` time.\r\n\r\nIf instead, we scale `delta` time, we get the (likely) desired behavior:\r\n\r\n````\r\nlet elapsed = 0;\r\nonLoop(({ delta }) => {\r\n if (!groupRef.value) return\r\n\r\n elapsed += delta * props.speed\r\n const theta = offset.value + elapsed\r\n groupRef.value.rotation.x = (Math.cos((theta / 4)) / 8) * props.rotationFactor\r\n [ ... ]\r\n````\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-dpvzsu?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n* Use Levioso in a TresCanvas\r\n* Place a visible element in the Levioso\r\n* Set speed prop\r\n* Change speed prop\r\n\r\nSee StackBlitz.\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/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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2922],{"name":2888,"color":2889},208,"closed","Levioso – changing speed leads to (likely) unwanted behavior","2023-10-10T09:00:57Z","https://github.com/Tresjs/cientos/issues/208",0.6658235,{"description":2930,"labels":2931,"number":2938,"owner":2868,"repository":2869,"state":2924,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Description\r\n\r\nIdea from @userquin, the idea would be to use [Vue named scoped slots ](https://vuejs.org/guide/components/slots.html#named-scoped-slots) to be able to get the canvas context on the parent like this:\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"state\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"state?.renderer\"\r\n :args=\"[state?.camera, state?.renderer?.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\nOr even deconstruct it\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"{ camera, renderer }\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"renderer\"\r\n :args=\"[camera, renderer.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\n### Suggested solution\r\n\r\nAdd this to `TresCanvas.vue`\r\n\r\n```html\r\n\u003Ccanvas\r\n ref=\"canvas\"\r\n :data-scene=\"scene.uuid\"\r\n :class=\"$attrs.class\"\r\n :data-tres=\"`tresjs ${pkg.version}`\"\r\n :style=\"{\r\n display: 'block',\r\n width: '100%',\r\n height: '100%',\r\n position: windowSize ? 'fixed' : 'relative',\r\n top: 0,\r\n left: 0,\r\n pointerEvents: 'auto',\r\n touchAction: 'none',\r\n ...$attrs.style as Object,\r\n }\"\r\n >\r\n \u003Cslot v-bind=\"context\" />\r\n\u003C/canvas>\r\n```\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nrelated #565\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.",[2932,2935],{"name":2933,"color":2934},"wontfix","ffffff",{"name":2936,"color":2937},"has-workaround","AEA9C4",572,"Use default slot props to get Canvas context","2024-06-01T07:39:43Z","https://github.com/Tresjs/tres/issues/572",0.69376576,{"description":2944,"labels":2945,"number":2946,"owner":2868,"repository":2869,"state":2924,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Describe the bug\n\nI'm trying to dynamically add an event listener to a TresPrimitive component in my Vue project. The goal is to listen to the on-pointer-down event and handle it programmatically. However, the code doesn't seem to work as expected, and the event listener is not being triggered.\n\n\n```\nimport { ref, watch } from 'vue';\n\nconst model = ref\u003CTresPrimitive>();\n\nwatch(model, () => {\n if (!model.value) return;\n\n // Attempt 1: Modify the handlers property\n model.value.__tres.handlers.onPointerDown = (e: any) => {\n alert(\"click 1\");\n };\n\n // Attempt 2: Add event listener programmatically\n model.value.addEventListener('pointer-down', (e: any) => {\n alert(\"click 2\");\n });\n});\n\n\u003Ctemplate>\n \u003Cprimitive :object=\"model\" ref=\"model\" />\n\u003C/template>\n```\n\n### Reproduction\n\n*\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\n\n```\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.",[],906,"Unable to Dynamically Add Event Listener to a TresPrimitive Component","2025-01-17T14:37:19Z","https://github.com/Tresjs/tres/issues/906",0.6969912,{"description":2952,"labels":2953,"number":2955,"owner":2868,"repository":2956,"state":2924,"title":2957,"updated_at":2958,"url":2959,"score":2960},"Hello. First of all I appreciate a lot for your effort to develop and maintain it.\r\nI'm really happy to meet this awesome library.\r\n\r\n# The Problem on `lab.tresjs.org`\r\n\r\nI'm writing to notify the possibility that there are some wrong settings from server-side.\r\n\r\nToday I tried to see the **ShowCase** page (lab.tresjs.org), but I can't do like the photo below.\r\n\r\n\r\n\r\nIt fails to get belows according to console messages.\r\n- https://lab.tresjs.org/\r\n- https://lab.tresjs.org/api/_content/query/luVj25sCnR.1720210146607.json?_params=%7B%22where%22:%5B%7B%22_path%22:%22%2Fexperiments%2Fsimple-editor%22%7D%5D,%22first%22:true,%22sort%22:%5B%7B%22_stem%22:1,%22$numeric%22:true%7D%5D%7D\r\n\r\nSpecific links are also not working. (2 examples)\r\n- https://lab.tresjs.org/experiments/simple-editor\r\n- https://lab.tresjs.org/experiments/glass-material\r\n\r\n# Local has no problems.\r\n\r\nWhen I clone and run it at local environment, it works well.\r\n\r\n\r\n\r\n\r\nThank you.",[2954],{"name":2888,"color":2889},145,"lab","lab.tresjs.org doesn't work (Only header is shown. Fail to fetch items.)","2024-09-01T16:08:13Z","https://github.com/Tresjs/lab/issues/145",0.69708705,{"description":2962,"labels":2963,"number":2964,"owner":2868,"repository":2879,"state":2924,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Description\n\nAs a developer using Tresjs I would like to have a simple way to add sparkles as a component\n\n### Suggested solution\n\nSimilar to: https://github.com/pmndrs/drei#sparkles\n\n### Alternative\n\nAny other alternative is considered\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.",[],221,"Sparkles","2023-11-09T19:27:14Z","https://github.com/Tresjs/cientos/issues/221",0.7021371,["Reactive",2970],{},["Set"],["ShallowReactive",2973],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBv1Y4Zrl2iMSWwVJlHWXR-9YaPWpuY0Uz6ouz0gUgSI":-1},"/Tresjs/cientos/275"]