\r\n\r\n \u003C!-- There will be a type problem here -->\r\n\t\t\t\u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\r\n\r\n\t\t\t\u003CSuspense>\r\n\t\t\t\t\u003CTexture_02 />\r\n\t\t\t\u003C/Suspense>\r\n\r\n \u003C!-- OK -->\r\n\t\t\t\u003CTresDirectionalLight :intensity=\"1\" :position=\"new THREE.Vector3(0, 3, 3)\" v-light-helper />\r\n\t\t\u003C/TresCanvas>\r\n\t\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\n\t.container {\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t}\r\n\u003C/style>\r\n\r\n```\n\n### Alternative\n\nAt first I thought: position=\"new THREE.Vector3(0, 3, 3)\" is a better way to understand the original parameters of threejs, but after reading the documentation, I found: position=\"[0,3,3]\" is simpler ;But the recommended writing method in the document is: position=\"[0,3,3]\"\r\n\r\n\r\n\n\n### Additional context\n\n\r\n\r\n\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.",[],696,"tres","position type is incorrect","2024-05-27T03:45:05Z","https://github.com/Tresjs/tres/issues/696",0.78502876,{"description":2888,"labels":2889,"number":2893,"owner":2871,"repository":2882,"state":2894,"title":2895,"updated_at":2896,"url":2897,"score":2898},"**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",[2890],{"name":2891,"color":2892},"feature","c2e0c6",56,"closed","BufferGeometry and BufferAttribute support","2022-12-22T10:31:58Z","https://github.com/Tresjs/tres/issues/56",0.7540838,{"description":2900,"labels":2901,"number":2902,"owner":2871,"repository":2882,"state":2894,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Description\r\n\r\nRight now there is no way to access the TresCanvas context without hacking the script setup using TresCanvas:\r\n\r\n\u003Cdetails>\r\n\u003Csummary>\u003Cstrong>Hack\u003C/strong>\u003C/summary>\r\n\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core';\r\nimport { computed, ref, onMounted } from 'vue';\r\n\r\nimport { extend, useTresContext } from '@tresjs/core';\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls';\r\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry';\r\n\r\nconst trescanvas = ref();\r\nconst state = ref();\r\n\r\nonMounted(() => {\r\n setTimeout(() => {\r\n state.value = trescanvas.value?.context;\r\n }, 0);\r\n});\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 ref=\"trescanvas\" shadows alpha>\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 \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\u003C/details>\r\n\r\n### Suggested solution\r\n\r\nAdd default slot props, we¡ve the default slot there without any binding:\r\n```ts\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\nthen in the sfc template:\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### Alternative\r\n\r\ncheck the hack in the description\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.",[],573,"provide default slot props in TresCanvas","2024-03-05T19:47:12Z","https://github.com/Tresjs/tres/issues/573",0.7619114,{"description":2908,"labels":2909,"number":2919,"owner":2871,"repository":2882,"state":2894,"title":2920,"updated_at":2921,"url":2922,"score":2923},"**Describe the bug**\r\nThe following props are not being properly updated:\r\n\r\n- `enabled`.\r\n- `showX`, `showY`, `showZ`\r\n- `axis`.\r\n\r\n**Reproduction**\r\n[Stackblitz](https://stackblitz.com/edit/tresjs-transform-controls?file=src%2Fcomponents%2FTheExperience.vue,package.json) \r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Go to[ '...'](https://stackblitz.com/edit/tresjs-transform-controls?file=src%2Fcomponents%2FTheExperience.vue,package.json)\r\n2. Play with props on the panel top right\r\n\r\n**Expected behavior**\r\nAll props work\r\n\r\n\r\n**System Info**\r\nOutput of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers` \r\n\r\n```\r\n System:\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: 16.14.2 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 7.17.0 - /usr/local/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^1.3.0 => 1.3.0 \r\n @tresjs/core: ^1.4.0 => 1.4.0 \r\n vite: ^3.2.4 => 3.2.4 \r\n```\r\n\r\n**Additional context**\r\nMost probably is because this properties doesn't use a `set` function\r\n",[2910,2913,2916],{"name":2911,"color":2912},"bug","d73a4a",{"name":2914,"color":2915},"good first issue","7057ff",{"name":2917,"color":2918},"help wanted","008672",63,"TransformControls cientos props without set method not updating","2023-01-07T18:45:57Z","https://github.com/Tresjs/tres/issues/63",0.76254284,{"description":2925,"labels":2926,"number":2928,"owner":2871,"repository":2882,"state":2894,"title":2929,"updated_at":2930,"url":2931,"score":2932},"**Is your feature request related to a problem? Please describe.**\r\n\r\nTresJS is intended to be as simple and verbose as possible, but we can add an optional \"preset\" configuration for example for realistic scenes\r\n\r\n**Describe the solution you'd like**\r\n\r\n```\r\n\u003CTresCanvas preset=\"realistic\" />\r\n```\r\n\r\nWould set the following properties to the render\r\n\r\n```\r\nrenderer.physicallyCorrectLights = true // real lights\r\nrenderer.outputEncoding = THREE.sRGBEncoding // gama correction\r\nrenderer.toneMapping = THREE.ACESFilmicToneMapping\r\nrenderer.toneMappingExposure = 3\r\nrenderer.shadowMap.enabled = true\r\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap\r\n```\r\n\r\n",[2927],{"name":2914,"color":2915},109,"Renderer presets","2023-02-19T13:59:01Z","https://github.com/Tresjs/tres/issues/109",0.7679262,{"description":2934,"labels":2935,"number":2940,"owner":2871,"repository":2882,"state":2894,"title":2941,"updated_at":2942,"url":2943,"score":2944},"**Describe the bug**\r\nWith the new updates of TresJs/Core you can assign the setAttributes('position', BufferGeo)...\r\nLike this...\r\n``` \r\n \u003CTresPoints>\r\n \u003CTresBufferGeometry :position=\"[positionArray, 3]\" :a-scale=\"[scaleArray, 1]\" />\r\n \u003CTresShaderMaterial v-bind=\"shader\" />\r\n \u003C/TresPoints>\r\n\r\n```\r\nBefore this work, this broke the \"Stars\" abstraction in cientos, and also other examples (with the TresPoints)\r\n\r\nI am doing ... What I expect is ... What actually happening is\r\n\r\n**Reproduction**\r\nPlease provide a link using this template on [Stackblitz](https://stackblitz.com/edit/tresjs-basic?file=README.md) \r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Install the last version of cientos and tres\r\n2. Try to use \u003CStars /> component\r\n\r\n**Expected behavior**\r\nCorrect assign of the attributes in TresBufferGeometry \r\n\r\n**Screenshots**\r\nThis is the current error (screenshots take for playground portal-journey experiment) last version Tresjs\r\n\r\n\r\n",[2936,2937],{"name":2911,"color":2912},{"name":2938,"color":2939},"needs reproduction","511ECF",229,"TresBufferGeometry get broken with the last Tresjs update (Attributes assign)","2023-04-25T07:11:58Z","https://github.com/Tresjs/tres/issues/229",0.7698139,{"description":2946,"labels":2947,"number":2949,"owner":2871,"repository":2882,"state":2894,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Description\n\nAs a developer using TresJS, I would like to change reactively the constructor params via args prop, which is not possible at the moment.\r\n\r\n```ts\r\n\u003Cscript lang=\"ts\" setup>\r\n// renderer.domElement is undefined at the beginning. \r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresOrbitControls :args=\"[activeCamera || camera, renderer?.domElement || domElement]\" />\r\n \u003C/template>\r\n ```\n\n### Suggested solution\n\nAdd logic to `nodeOps` to re-instance the THREE object when `args` change\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.",[2948],{"name":2911,"color":2912},366,"Re-instance THREE instances via args prop reactivity","2023-08-17T13:53:39Z","https://github.com/Tresjs/tres/issues/366",0.76994383,{"description":2955,"labels":2956,"number":1448,"owner":2871,"repository":2957,"state":2894,"title":2958,"updated_at":2959,"url":2960,"score":2961},"**Is your feature request related to a problem? Please describe.**\r\n\r\n\r\n**Describe the solution you'd like**\r\nIn order to update the textGeometry and have the v-model \"reactive text\" effect I propose adding a new needsUpdate prop\r\nExample:\r\n\r\n\r\n**Suggested solution**\r\nTo achieve this effect we need to listen to changes in the text prop and when it changes, trigger a dispose() method in the current geometry. I have done this with \"watch\", but for perfomance reasons it could be better to try with computed()\r\n\r\nAlso if needsUpdate prop is set to false (default value), we just skip the listen and render the plain text\r\n\r\n**Additional context**\r\n",[],"cientos","new needsUpdate props in Text3D abstraction","2023-05-02T15:31:10Z","https://github.com/Tresjs/cientos/issues/17",0.7720874,{"description":2963,"labels":2964,"number":2967,"owner":2871,"repository":2957,"state":2894,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### 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.",[2965,2966],{"name":2914,"color":2915},{"name":2917,"color":2918},147,"Enhance Environment and useEnvironment abstractions","2023-10-09T17:33:47Z","https://github.com/Tresjs/cientos/issues/147",0.77533823,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjnkTbNHhQuyzqySTaVwW3kBF_dfAlQUMJVVQk91m4gY":-1},"/Tresjs/tres/100"]