\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003C!-- Your scene here -->\r\n \u003CTresMesh cast-shadow :position=\"[0, 0, 0]\">\r\n \u003CTresBoxGeometry :args=\"[1, 1, 2]\" />\r\n \u003CTresMeshToonMaterial color=\"blue\" />\r\n \u003CHtml center transform sprite>\r\n \u003Cdiv class=\"text\">TEXT\u003C/div>\r\n \u003C/Html>\r\n \u003C/TresMesh>\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\nimport { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'\r\nimport { Html, OrbitControls } from '@tresjs/cientos'\r\nconst gl = {\r\n clearColor: '#87CEEB',\r\n shadows: true,\r\n alpha: true,\r\n shadowMapType: BasicShadowMap,\r\n outputColorSpace: SRGBColorSpace,\r\n toneMapping: NoToneMapping,\r\n}\r\n\u003C/script>\r\n\u003Cstyle>\r\n.canvas {\r\n width: 500px;\r\n height: 500px;\r\n position: relative;\r\n}\r\n.text {\r\n color: white;\r\n font-weight: bold;\r\n font-size: 30px;\r\n}\r\n\u003C/style>\r\n\r\n\r\n```\r\nhook.js:608 THREE.Material: parameter 'vertexShader' has value of undefined.\r\n\r\nnow about page\r\n\r\n\r\nif I go home?\r\n\r\nIf I add Html components, the error increases by the corresponding number.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-4pso7hpr?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nnpx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers\r\nNeed to install the following packages:\r\nenvinfo@7.14.0\r\nOk to proceed? (y) y\r\n\r\n\r\n System:\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\n```\n\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.",[],587,"Tresjs","cientos","open","When TresCanvas is unmounted, an error occurs equal to the number of Html components.","2025-01-14T07:22:09Z","https://github.com/Tresjs/cientos/issues/587",0.6622313,{"description":2865,"labels":2866,"number":2870,"owner":2857,"repository":2858,"state":2859,"title":2871,"updated_at":2872,"url":2873,"score":2874},"### Describe the bug\n\nWhen `:position` is set on a model/primitive, the `Html` wrapper remains as `display:none` and is not visible\n\n### Reproduction\n\nTBA, sorry\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/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.",[2867],{"name":2868,"color":2869},"needs reproduction","16309A",409,"`Html` remains `display:none` if `:position` is set on model","2024-05-08T13:52:27Z","https://github.com/Tresjs/cientos/issues/409",0.71899354,{"description":2876,"labels":2877,"number":2887,"owner":2857,"repository":2888,"state":2859,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### Description\n\nHello there! \r\n\r\nFirst of all, thanks a bunch for creating this awesome repository! Even though I'm not really familiar with Three.js, I've been playing around with graphical stuff using the canvas.\r\n\r\nWhile creating a simple scene on my web page, I suddenly became concerned about accessibility.\r\n\r\nYou know, the canvas element itself isn't accessible, but it seems the HTML spec allows for adding \"fallback content\" to the canvas element.\r\n\r\nhttps://html.spec.whatwg.org/multipage/dom.html#fallback-content\r\n\r\nI'd love it if you could add an interface to TresCanvas where we could provide text or something using a fallback slot or props.\r\n\r\nThank you!\n\n### Suggested solution\n\nI would be happy to have the following interface\r\n\r\n```html\r\n\u003CTresCanvas window-size>\r\n \u003C!-- any scenes -->\r\n\r\n \u003Ctemplate #fallback>\r\n A cat lifting a UFO is slowly rotating.\r\n \u003C/template>\r\n\u003C/TresCanvas>\r\n\r\n\u003C!-- render to -->\r\n\u003Ccanvas>A cat lifting a UFO is slowly rotating.\u003C/canvas>\r\n```\r\n\r\nI have confirmed that the text in the canvas element is read out loud as \"image: alt text\" in VoiceOver on a Mac.\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.",[2878,2881,2884],{"name":2879,"color":2880},"feature","c2e0c6",{"name":2882,"color":2883},"PR welcome","2D76B0",{"name":2885,"color":2886},"p2-nice-to-have","D4C5F9",352,"tres","Provide a slot or props that can be used for fallback of canvas elements","2024-03-31T11:10:46Z","https://github.com/Tresjs/tres/issues/352",0.7231732,{"description":2894,"labels":2895,"number":2902,"owner":2857,"repository":2858,"state":2859,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### 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.",[2896,2899],{"name":2897,"color":2898},"bug","d73a4a",{"name":2900,"color":2901},"docs","0075ca",368,"[Docs] - HTML examples are broken ","2024-07-18T08:07:36Z","https://github.com/Tresjs/cientos/issues/368",0.7294828,{"description":2908,"labels":2909,"number":2918,"owner":2857,"repository":2888,"state":2859,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Describe the bug\r\n\r\n## Problem\r\n\r\nThe [`extend` example code from the docs](https://docs.tresjs.org/advanced/extending.html#extending-an-element-dynamically) throws an error when used as written.\r\n\r\nResult is the same for Stackblitz and local playground.\r\n\r\n## Error (abridged)\r\n\r\nFirefox\r\n\r\n```\r\nUncaught (in promise) TypeError: _ctx.state is undefined\r\n default TheExperience.vue:14\r\n renderFnWithContext runtime-core.esm-bundler.js:774\r\n normalizeChildren runtime-core.esm-bundler.js:7090\r\n createBaseVNode runtime-core.esm-bundler.js:6901\r\n _createVNode runtime-core.esm-bundler.js:6978\r\n createVNodeWithArgsTransform runtime-core.esm-bundler.js:6855\r\n createBlock runtime-core.esm-bundler.js:6828\r\n _sfc_render TheExperience.vue:11\r\n renderComponentRoot runtime-core.esm-bundler.js:834\r\n componentUpdateFn runtime-core.esm-bundler.js:5789\r\n run reactivity.esm-bundler.js:178\r\n update runtime-core.esm-bundler.js:5902\r\n setupRenderEffect runtime-core.esm-bundler.js:5910\r\n mountComponent runtime-core.esm-bundler.js:5700\r\n processComponent runtime-core.esm-bundler.js:5653\r\n patch runtime-core.esm-bundler.js:5128\r\n componentUpdateFn runtime-core.esm-bundler.js:5796\r\n run reactivity.esm-bundler.js:178\r\n update runtime-core.esm-bundler.js:5902\r\n setupRenderEffect runtime-core.esm-bundler.js:5910\r\n mountComponent runtime-core.esm-bundler.js:5700\r\n processComponent runtime-core.esm-bundler.js:5653\r\n patch runtime-core.esm-bundler.js:5128\r\n componentUpdateFn runtime-core.esm-bundler.js:5861\r\n run reactivity.esm-bundler.js:178\r\n update runtime-core.esm-bundler.js:5902\r\n callWithErrorHandling runtime-core.esm-bundler.js:158\r\n flushJobs runtime-core.esm-bundler.js:365\r\n promise callback*queueFlush runtime-core.esm-bundler.js:275\r\n queuePostFlushCb runtime-core.esm-bundler.js:295\r\n queueEffectWithSuspense runtime-core.esm-bundler.js:1683\r\n scheduler runtime-core.esm-bundler.js:1852\r\n triggerEffect reactivity.esm-bundler.js:373\r\n triggerEffects reactivity.esm-bundler.js:363\r\n triggerRefValue reactivity.esm-bundler.js:973\r\n effect reactivity.esm-bundler.js:1130\r\n triggerEffect reactivity.esm-bundler.js:373\r\n triggerEffects reactivity.esm-bundler.js:358\r\n triggerRefValue reactivity.esm-bundler.js:973\r\n effect reactivity.esm-bundler.js:1130\r\n triggerEffect reactivity.esm-bundler.js:373\r\n triggerEffects reactivity.esm-bundler.js:358\r\n triggerRefValue reactivity.esm-bundler.js:973\r\n set value reactivity.esm-bundler.js:1017\r\n finalizeNavigation vue-router.mjs:3353\r\n pushWithRedirect vue-router.mjs:3218\r\n promise callback*pushWithRedirect vue-router.mjs:3185\r\n push vue-router.mjs:3110\r\n install vue-router.mjs:3551\r\n use runtime-core.esm-bundler.js:3786\r\n \u003Canonymous> main.ts:9\r\n setTimeout handler* __uno.css:19\r\n \u003Canonymous> __uno.css:19\r\n```\r\n\r\nChrome\r\n\r\n```\r\nUncaught TypeError: Cannot read properties of undefined (reading 'renderer')\r\n at App.vue:14:19\r\n at renderFnWithContext (chunk-QSL5RKHU.js?v=52cbdb0e:2162:13)\r\n at normalizeChildren (chunk-QSL5RKHU.js?v=52cbdb0e:8380:34)\r\n at createBaseVNode (chunk-QSL5RKHU.js?v=52cbdb0e:8191:5)\r\n at _createVNode (chunk-QSL5RKHU.js?v=52cbdb0e:8268:10)\r\n at createVNodeWithArgsTransform (chunk-QSL5RKHU.js?v=52cbdb0e:8145:10)\r\n at createBlock (chunk-QSL5RKHU.js?v=52cbdb0e:8118:5)\r\n at Proxy._sfc_render (App.vue:11:3)\r\n at renderComponentRoot (chunk-QSL5RKHU.js?v=52cbdb0e:2211:17)\r\n at ReactiveEffect.componentUpdateFn [as fn] (chunk-QSL5RKHU.js?v=52cbdb0e:7085:46)\r\n```\r\n\r\n## Screenshot\r\n\r\nFirefox\r\n\r\n\u003Cimg width=\"681\" alt=\"Screenshot 2024-03-02 at 15 08 42\" src=\"https://github.com/Tresjs/tres/assets/20469369/9a6f836d-6359-44c7-9020-583a73de1801\">\r\n\r\nChrome\r\n\r\n\u003Cimg width=\"623\" alt=\"Screenshot 2024-04-04 at 18 31 45\" src=\"https://github.com/Tresjs/tres/assets/20469369/287235e9-b5f3-42ab-8328-9ac29705fa09\">\r\n\r\n## Example code from docs\r\n\r\nIn case it's updated in the meantime, [here's the example code from the docs](https://docs.tresjs.org/advanced/extending.html#extending-an-element-dynamically) as of March 2, 2024:\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { extend } from '@tresjs/core'\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls'\r\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry'\r\n\r\n// Add the element to the catalogue\r\nextend({ TextGeometry, OrbitControls })\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas shadows alpha>\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls v-if=\"state.renderer\" :args=\"[state.camera, state.renderer?.domElement]\" />\r\n \u003CTresMesh>\r\n \u003CTresTextGeometry :args=\"['TresJS', { font, ...fontOptions }]\" center />\r\n \u003CTresMeshMatcapMaterial :matcap=\"matcapTexture\" />\r\n \u003C/TresMesh>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-hkwcer?file=src%2FApp.vue\r\n\r\n### Steps to reproduce\r\n\r\n* Open Stackblitz\r\n* Open browser console\r\n* See error\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 18.18.0 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 10.2.3 - /usr/local/bin/npm\r\n pnpm: 8.15.3 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @tresjs/cientos: ^3.5.1 => 3.5.1 \r\n @tresjs/core: ^3.4.1 => 3.4.1 \r\n @tresjs/eslint-config-vue: ^0.2.1 => 0.2.1 \r\n vite: ^4.5.0 => 4.5.0 \r\n```\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.",[2910,2911,2912,2915],{"name":2897,"color":2898},{"name":2900,"color":2901},{"name":2913,"color":2914},"good first issue","7057ff",{"name":2916,"color":2917},"help wanted","008672",565,"Docs `extend` example throws error","2024-04-04T16:32:59Z","https://github.com/Tresjs/tres/issues/565",0.73272294,{"description":2924,"labels":2925,"number":251,"owner":2857,"repository":2926,"state":2859,"title":2927,"updated_at":2928,"url":2929,"score":2930},"Hi!!\r\nPls help, how to work with STL models in Tres?\r\nI'm load model via STLloader as in THREE, and how I can render it now?\r\nTrying primitive\r\n```\r\n \u003CSuspense>\r\n \u003Cprimitive :object=\"mySTLModel\" />\r\n \u003C/Suspense>\r\n```\r\nBut get `Failed to resolve component: primitive`",[],"lab","How to load and render STL models?","2024-07-17T17:42:39Z","https://github.com/Tresjs/lab/issues/53",0.7424593,{"description":2932,"labels":2933,"number":2934,"owner":2857,"repository":2888,"state":2859,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Description\r\n\r\nHey there,\r\nTres looks amazing. Great work!\r\n\r\nI'd love to switch to Tres, but my application uses multiple canvas elements, each rendering a different camera perspectives to the same scene. Of what I read in the docs & source code, TresCanvas creates its own scene and doesn't share it with other TresCanvas instances. I'd love to see TresCanvas taking scene as an optional prop, but I can also imagine that there might be a lot of side effects coming with such a change.\r\n\r\nWhat do you think of it? Edge case that's hard to implement or easy and viable for the ecosystem?\r\n\r\nHave a great day!\r\nMarc\r\n\r\n\r\n### Suggested solution\r\n\r\n`/src/components/TresCanvas.vue`\r\n```ts\r\nconst props = withDefaults(defineProps\u003CTresCanvasProps>(), {\r\n ...,\r\n scene: new Scene() // TresScene | Scene\r\n})\r\n```\r\nI already know, I'm missing out on component lifecycle handling. I just wanted to point in the direction this is going.\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nI think this is somehow the reverse request to [Portal](https://github.com/Tresjs/tres/issues/789)\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.",[],842,"Decouple scene from canvas","2024-10-17T14:16:20Z","https://github.com/Tresjs/tres/issues/842",0.745855,{"description":2940,"labels":2941,"number":2947,"owner":2857,"repository":2948,"state":2859,"title":2949,"updated_at":2950,"url":2951,"score":2952},"Inevitable 😂 \r\n\r\n- Unocss Dark mode https://unocss.dev/presets/mini#dark-mode \r\n- Vueuse dark https://vueuse.org/core/useDark/\r\n",[2942,2945,2946],{"name":2943,"color":2944},"enhancement","a2eeef",{"name":2913,"color":2914},{"name":2916,"color":2917},75,"leches","Dark mode","2023-11-30T12:40:21Z","https://github.com/Tresjs/leches/issues/75",0.74664557,{"description":2954,"labels":2955,"number":2957,"owner":2857,"repository":2858,"state":2859,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Description\n\nThis is a fancy way of using environment images projected as if the objects are in the ground, (one of the problem using images as background into the scenes is that, seems like the object are always floating, this \"fix\" that)\n\n### Suggested solution\n\nYou can check here: https://threejs.org/examples/?q=ground#webgl_materials_envmaps_groundprojected\n\n### Alternative\n\nWe can use a completely new component OR update the actual Environment component, adding one more props (I would prefer this option)\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.",[2956],{"name":2913,"color":2914},323,"GroundProjected","2024-04-02T07:13:09Z","https://github.com/Tresjs/cientos/issues/323",0.7469105,{"description":2963,"labels":2964,"number":2966,"owner":2857,"repository":2967,"state":2968,"title":2969,"updated_at":2970,"url":2971,"score":2972},"\r\n\r\n😊 https://docs.pmnd.rs/react-postprocessing/effects/noise\r\n",[2965],{"name":2943,"color":2944},66,"post-processing","closed","Noise","2023-11-07T21:19:16Z","https://github.com/Tresjs/post-processing/issues/66",0.7255893,["Reactive",2974],{},["Set"],["ShallowReactive",2977],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fsb_4hgwA1ffOC982g-JC7fnpSAGI6QAtuJaBAui5Izc":-1},"/Tresjs/cientos/341"]