Merge remote-tracking branch 'origin/main' into docs/code-group-in-as…

…ync-components

.github/workflows/lint.yml

@@ -8,20 +8,20 @@ env:
 jobs:
   lint:
     name: Lint
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
         node-version: [20]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup Pnpm
+      - name: Setup pnpm
         uses: pnpm/action-setup@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Run Lint

CHANGELOG.md

@@ -1,5 +1,19 @@
 
 
+## [4.0.0](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0) (2024-08-20)
+
+
+### Features
+
+* Add cylinder component ([9e17559](https://github.com/Tresjs/cientos/commit/9e17559fc98066db79b02b7ea0c98ae3037ac906))
+* V4 ([#420](https://github.com/Tresjs/cientos/issues/420)) ([0cdd58e](https://github.com/Tresjs/cientos/commit/0cdd58ee0b8f1e086899a3efb7ad93575b117ccc)), closes [#425](https://github.com/Tresjs/cientos/issues/425) [#439](https://github.com/Tresjs/cientos/issues/439) [#435](https://github.com/Tresjs/cientos/issues/435) [#441](https://github.com/Tresjs/cientos/issues/441) [#436](https://github.com/Tresjs/cientos/issues/436) [#428](https://github.com/Tresjs/cientos/issues/428)
+
+
+### Bug Fixes
+
+* **SkyDemo:** value.value -> value ([82fe77b](https://github.com/Tresjs/cientos/commit/82fe77b4dc11fd23b47e40bc33a843dc69cf017f))
+* vue attrs hyphenation issues ([4f9b61b](https://github.com/Tresjs/cientos/commit/4f9b61b954a916d8f8880798f06c03b79092896b))
+
 ## [4.0.0-rc.2](https://github.com/Tresjs/cientos/compare/4.0.0-rc.1...4.0.0-rc.2) (2024-07-26)
 
 ## [4.0.0-rc.1](https://github.com/Tresjs/cientos/compare/4.0.0-rc.0...4.0.0-rc.1) (2024-07-25)

docs/.vitepress/theme/components/AnimatedSpriteNamedAnimationDemo.vue

@@ -12,12 +12,7 @@ const animations = ref(
 </script>
 
 <template>
-  <TresCanvas
-    clear-color="#82DBC5"
-    @click="() => {
-      animations.push(animations.shift() as string)
-    }"
-  >
+  <TresCanvas clear-color="#82DBC5">
     <TresPerspectiveCamera :position="[0, 0, 15]" />
     <Suspense>
       <AnimatedSprite
@@ -26,6 +21,7 @@ const animations = ref(
         :animation="animations[0]"
         :fps="15"
         :loop="true"
+        @click="() => { animations.push(animations.shift() as string) }"
       />
     </Suspense>
   </TresCanvas>

docs/guide/abstractions/animated-sprite.md

@@ -51,16 +51,48 @@ In the wild, spritesheets are often distributed without atlases and the images a
 
 ## Props
 
-<CientosPropsTable
-component-path="src/core/abstractions/AnimatedSprite/component.vue"
-:fields="['name', 'description', 'default', 'required']"
-:on-format-value="({valueFormatted, propName, fieldName, getFieldFormatted})=> {
-  if (fieldName === 'description') {
-    const type = getFieldFormatted('type')
-    return type + ' – ' + valueFormatted
-  }
-}"
- />
+<table>
+<thead>
+<tr><th>Name</th><th>Description</th><th>Default</th></tr>
+</thead>
+<tbody>
+<tr><td>image</td><td><code>string</code> –
+  URL of the image texture or an image dataURL. This prop is not reactive.
+</td><td></td></tr>
+<tr><td>atlas</td><td><code>string | Atlasish</code> –
+  <ul>
+   <li>If <code>string</code>, the URL of the JSON atlas.</li>
+   <li>If <code>number</code>, the number of columns in the texture.</li>
+   <li>If <code>[number, number]</code>, the number of columns/rows in the texture.</li>
+   <li>If <code>AtlasData</code>, the atlas as a JS object.</li>
+  </ul>
+  <p>This prop is not reactive.</p>
+</td><td></td></tr>
+<tr><td>definitions</td><td><code>Record&lt;string, string&gt;</code> – Specify playback frame order and repeated frames (delays). <code>definitions</code> is a record where keys are atlas animation names and values are strings containing an animation definition.<br />
+  <p>A "animation definition" comma-separated string of frame numbers with optional parentheses-surrounded durations.</p>
+   <p>Here is how various definition strings convert to arrays of frames for playback:</p>
+  <ul>
+  <li>"0,2,1" - [0,2,1], i.e., play frame 0, 2, then 1.</li>
+  <li>"2(10)" - [2,2,2,2,2,2,2,2,2,2], i.e., play from 2 10 times.</li>
+  <li>"1-4" - [1,2,3,4]</li>
+  <li>"10-5(2)" - [10,10,9,9,8,8,7,7,6,6,5,5]</li>
+  <li>"1-4(3),10(2)" - [1,1,1,2,2,2,3,3,3,4,4,4,10,10]</li>
+  </ul>
+</td><td></td></tr>
+<tr><td>fps</td><td><code>number</code> – Desired frames per second of the animation.</td><td><code>30</code></td></tr>
+<tr><td>loop</td><td><code>boolean</code> – Whether or not the animation should loop.</td><td><code>true</code></td></tr>
+<tr><td>animation</td><td><code>string | [number, number] | number</code> – If <code>string</code>, name of the animation to play. If <code>[number, number]</code>, start and end frames of the animation. If <code>number</code>, frame number to display.</td><td><code>0</code></td></tr>
+<tr><td>paused</td><td><code>boolean</code> – Whether the animation is paused.</td><td><code>false</code></td></tr>
+<tr><td>reversed</td><td><code>boolean</code> – Whether to play the animation in reverse.</td><td><code>false</code></td></tr>
+<tr><td>flipX</td><td><code>boolean</code> – Whether the sprite should be flipped, left to right.</td><td><code>false</code></td></tr>
+<tr><td>resetOnEnd</td><td><code>boolean</code> – For a non-looping animation, when the animation ends, whether to display the zeroth frame.</td><td><code>false</code></td></tr>
+<tr><td>asSprite</td><td><code>boolean</code> – Whether to display the object as a THREE.Sprite. <a href="https://threejs.org/docs/?q=sprite#api/en/objects/Sprite">See THREE.Sprite</a></td><td><code>true</code></td></tr>
+<tr><td>center</td><td><code>TresVector2</code> – Anchor point of the object. A value of [0.5, 0.5] corresponds to the center. [0, 0] is left, bottom.</td><td><code>[0.5, 0.5]</code></td></tr>
+<tr><td>alphaTest</td><td><code>number</code> – Alpha test value for the material. <a href="https://threejs.org/docs/#api/en/materials/Material.alphaTest">See THREE.Material.alphaTest</a></td><td><code>0.0</code></td></tr>
+<tr><td>depthTest</td><td><code>boolean</code> – Depth test value for the material. <a href="https://threejs.org/docs/#api/en/materials/Material.depthTest">See THREE.Material.depthTest</a></td><td><code>true</code></td></tr>
+<tr><td>depthWrite</td><td><code>boolean</code> – Depth write value for the material. <a href="https://threejs.org/docs/#api/en/materials/Material.depthWrite">See THREE.Material.depthWrite</a></td><td><code>true</code></td></tr>
+</tbody>
+</table>
 
 ## Events
 
@@ -97,7 +129,7 @@ For our Cientos heart cartoon character animation, here's how the filenames map
 | cientosIdleToWalkTransition0000.png | cientosIdleToWalkTransition |
 | cientosWalk0000.png, cientosWalk0001.png, ... | cientosWalk |
 
-Try it out by clicking a few times below:
+Try it out by clicking a few times on the character below:
 
 <DocsDemo>
   <AnimatedSpriteNamedAnimationDemo />

docs/guide/staging/use-environment.md

@@ -11,7 +11,7 @@ It uses the [CubeTextureLoader](https://threejs.org/docs/#api/en/loaders/CubeTex
 ## Usage
 
 ::: warning
-`UseEnvironment` needs to be wrapped by a Suspense component. Please check the [Suspense API](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more info
+`UseEnvironment` needs to be wrapped by a Suspense component
 :::
 
 ```ts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "type": "module",
-  "version": "4.0.0-rc.2",
+  "version": "4.0.0",
   "packageManager": "pnpm@8.10.2",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -58,23 +58,23 @@
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@vueuse/core": "^10.11.0",
-    "camera-controls": "^2.8.5",
+    "@vueuse/core": "^11.0.1",
+    "camera-controls": "^2.9.0",
     "stats-gl": "^2.0.1",
     "stats.js": "^0.17.0",
     "three-custom-shader-material": "^5.4.0",
-    "three-stdlib": "^2.30.5"
+    "three-stdlib": "^2.32.2"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
-    "@tresjs/core": "4.2.3",
+    "@tresjs/core": "4.2.7",
     "@tresjs/eslint-config": "^1.1.0",
-    "@types/node": "^22.0.0",
+    "@types/node": "^22.4.1",
     "@types/three": "^0.167.1",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.1.1",
-    "eslint": "^9.8.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "eslint": "^9.9.0",
     "eslint-plugin-vue": "^9.27.0",
     "gsap": "^3.12.5",
     "husky": "^9.1.4",
@@ -83,14 +83,14 @@
     "release-it": "^17.6.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "three": "^0.167.0",
+    "three": "^0.167.1",
     "typescript": "^5.5.4",
-    "unocss": "^0.61.8",
-    "vite": "^5.3.5",
+    "unocss": "^0.62.2",
+    "vite": "^5.4.1",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "4.0.0-beta.2",
+    "vite-plugin-dts": "4.0.3",
     "vite-plugin-glsl": "^1.3.0",
     "vite-svg-loader": "^5.1.0",
-    "vitepress": "1.3.1"
+    "vitepress": "1.3.3"
   }
 }

playground/src/pages/controls/TransformControlsDemo.vue

@@ -5,6 +5,7 @@ import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls, TransformControls } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
+import type { TransformControlsProps } from '../../../../src/core/controls/TransformControls.vue'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -26,7 +27,7 @@ function changeObject(object: any) {
 
 const context = ref()
 
-const controlsState = reactive({
+const controlsState = reactive<Partial<TransformControlsProps>>({
   mode: 'translate',
   enabled: true,
   space: 'world',
@@ -37,6 +38,8 @@ const controlsState = reactive({
   showZ: true,
 })
 
+useControls('fpsgraph')
+
 const { mode, enabled, space, axis, size, showX, showY, showZ } = useControls({
   mode: {
     label: 'Mode',
@@ -84,7 +87,7 @@ watch([mode.value, enabled.value, space.value, axis.value, size.value, showX.val
     v-bind="gl"
     ref="context"
   >
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <TresPerspectiveCamera :position="[11, 11, 11]" :look-at="[0, 0, 0]" />
     <OrbitControls make-default />
 
     <TresMesh