fix: remove deconstructive props

.github/workflows/lint.yml

@@ -9,33 +9,22 @@ jobs:
   lint:
     name: Lint
     runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node-version: [16]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-
-      - name: setup caching
-        uses: actions/cache@v3
-        with:
-          path: ${{ env.PNPM_CACHE_FOLDER }}
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-
-      - name: setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+      - name: Setup Pnpm
+        uses: pnpm/action-setup@v2
         with:
-          version: 7
-
-      - name: setup node.js
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
-
-      - name: setup pnpm config
-        run: pnpm config set store-dir $PNPM_CACHE_FOLDER
-
-      - run: pnpm install --no-frozen-lockfile --shamefully-hoist
-
+      - name: Install dependencies
+        run: pnpm install
       - name: Run Lint
         run: pnpm run lint

.prettierrc.cjs

@@ -1,5 +1,4 @@
 module.exports = {
-    ...require('@alvarosabu/prettier-config'),
-    printWidth: 120,
-  }
-
+  ...require('@alvarosabu/prettier-config'),
+  printWidth: 120,
+}

package.json

@@ -51,35 +51,35 @@
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
-    "@release-it/conventional-changelog": "^5.1.1",
+    "@release-it/conventional-changelog": "^6.0.0",
     "@tweakpane/plugin-essentials": "^0.1.8",
-    "@types/node": "^20.3.1",
-    "@types/three": "^0.152.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@types/node": "^20.4.1",
+    "@types/three": "^0.153.0",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "eslint": "^8.42.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "gsap": "^3.12.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "gsap": "^3.12.2",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
-    "prettier": "^2.8.8",
-    "release-it": "^15.11.0",
+    "prettier": "^3.0.0",
+    "release-it": "^16.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "three": "^0.153.0",
-    "tweakpane": "^3.1.9",
-    "typescript": "^5.1.3",
-    "unocss": "^0.53.1",
-    "vite": "^4.3.9",
+    "three": "^0.154.0",
+    "tweakpane": "^3.1.10",
+    "typescript": "^5.1.6",
+    "unocss": "^0.53.4",
+    "vite": "^4.4.2",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "2.3.0",
+    "vite-plugin-dts": "3.1.1",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.2"
+    "vitepress": "1.0.0-beta.5"
   },
   "dependencies": {
-    "@vueuse/core": "^10.1.2",
-    "three-stdlib": "^2.23.9"
+    "@vueuse/core": "^10.2.1",
+    "three-stdlib": "^2.23.13"
   }
 }

playground/auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {

playground/package.json

@@ -9,13 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/core": "2.3.0",
-    "vue-router": "^4.2.2"
+    "@tresjs/core": "2.4.0",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "unplugin-auto-import": "^0.16.4",
+    "@tresjs/leches": "^0.4.0",
+    "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.1",
     "vite-plugin-glsl": "^1.1.2",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.4"
   }
 }

playground/src/pages/FirstPersonControlsDemo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping } from 'three'
+import { PointerLockControls, KeyboardControls } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 3, 10]" />
+    <PointerLockControls make-default />
+    <KeyboardControls head-bobbing />
+
+    <TresGridHelper :args="[100, 100]" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/components/TheStars.vue → playground/src/pages/StarsDemo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Stars } from '@trejs/cientos'
+import { OrbitControls, Stars } from '@tresjs/cientos'
 import { SRGBColorSpace, NoToneMapping } from 'three'
 
 const gl = {
@@ -12,7 +12,6 @@ const gl = {
 }
 
 const star = shallowRef<Stars>(null)
-
 </script>
 <template>
   <TresCanvas v-bind="gl" ref="canvas">

playground/src/pages/TransformControlsDemo.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { OrbitControls, TransformControls, useTweakPane } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const boxRef = ref()
+const sphereRef = ref()
+
+const transformRef = ref()
+
+function changeObject(object: any) {
+  transformRef.value = object
+}
+
+const context = ref()
+
+const controlsState = reactive({
+  mode: 'translate',
+  enabled: true,
+  space: 'world',
+  axis: 'XYZ',
+  size: 1,
+  showX: true,
+  showY: true,
+  showZ: true,
+})
+
+const { pane } = useTweakPane()
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'Mode',
+    options: [
+      { text: 'Translate', value: 'translate' },
+      { text: 'Rotate', value: 'rotate' },
+      { text: 'Scale', value: 'scale' },
+    ],
+    value: controlsState.mode,
+  })
+  .on('change', (e: any) => {
+    controlsState.mode = e.value
+  })
+
+pane.addInput(controlsState, 'enabled')
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'Space',
+    options: [
+      { text: 'World', value: 'world' },
+      { text: 'Local', value: 'local' },
+    ],
+    value: controlsState.space,
+  })
+  .on('change', (e: any) => {
+    controlsState.space = e.value
+  })
+
+pane.addBlade({
+  view: 'list',
+  label: 'Axis',
+  options: [
+    { text: 'X', value: 'X' },
+    { text: 'Y', value: 'Y' },
+    { text: 'Z', value: 'Z' },
+    { text: 'XY', value: 'XY' },
+    { text: 'YZ', value: 'YZ' },
+    { text: 'XZ', value: 'XZ' },
+    { text: 'XYZ', value: 'XYZ' },
+  ],
+  value: controlsState.axis,
+})
+
+pane.addInput(controlsState, 'size', {
+  step: 0.01,
+  min: 0,
+  max: 10,
+})
+
+pane.addInput(controlsState, 'showX')
+pane.addInput(controlsState, 'showY')
+pane.addInput(controlsState, 'showZ')
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" ref="context">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls make-default />
+
+    <TresMesh ref="boxRef" :position="[-2, 1, 0]" @click="changeObject(boxRef)">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TransformControls v-if="transformRef" :object="transformRef" v-bind="controlsState" />
+    <TresMesh ref="sphereRef" :position="[2, 1, 0]" @click="changeObject(sphereRef)">
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>