refactor(shapes): remove v-bind=$attrs on root element

playground/vue/src/pages/shapes/RoundedBoxDemo.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { OrbitControls, RoundedBox } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { shallowRef, watch } from 'vue'
@@ -9,6 +9,19 @@ watch(boxRef, (box) => {
   // eslint-disable-next-line no-console
   console.log(box)
 })
+
+const rx = shallowRef(0)
+const ry = shallowRef(0)
+const rz = shallowRef(0)
+let intervalId: ReturnType<typeof setInterval>
+
+onMounted(() => intervalId = setInterval(() => {
+  rx.value += 0.01
+  ry.value += 0.03
+  rz.value += 0.02
+}, 1000 / 30))
+
+onUnmounted(() => clearInterval(intervalId))
 </script>
 
 <template>
@@ -26,6 +39,7 @@ watch(boxRef, (box) => {
     <OrbitControls />
     <RoundedBox
       ref="boxRef"
+      :rotation="[rx, ry, rz]"
     >
       <TresMeshBasicMaterial
         :color="0x00FF00"

src/core/shapes/Box.vue

@@ -38,10 +38,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="boxRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="boxRef">
     <TresBoxGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Circle.vue

@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="circleRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="circleRef">
     <TresCircleGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Cone.vue

@@ -38,10 +38,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="coneRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="coneRef">
     <TresConeGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Cylinder.vue

@@ -38,7 +38,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh ref="cylinderRef" v-bind="$attrs">
+  <TresMesh ref="cylinderRef">
     <TresCylinderGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Dodecahedron.vue

@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="dodecahedronRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="dodecahedronRef">
     <TresDodecahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Icosahedron.vue

@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="icosahedronRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="icosahedronRef">
     <TresIcosahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Octahedron.vue

@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="octahedronRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="octahedronRef">
     <TresOctahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Plane.vue

@@ -39,7 +39,6 @@ defineExpose({
   <TresMesh
     ref="planeRef"
     :rotation="[-Math.PI / 2, 0, 0]"
-    v-bind="$attrs"
   >
     <TresPlaneGeometry :args="args" />
     <slot>

src/core/shapes/Ring.vue

@@ -36,10 +36,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="ringRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="ringRef">
     <TresRingGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Sphere.vue

@@ -36,10 +36,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="sphereRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="sphereRef">
     <TresSphereGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Superformula.vue

@@ -158,11 +158,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="superformulaRef"
-    v-bind="$attrs"
-    :geometry="geometry"
-  >
+  <TresMesh ref="superformulaRef" :geometry="geometry">
     <slot>
       <TresMeshBasicMaterial :color="color" />
     </slot>

src/core/shapes/Tetrahedron.vue

@@ -32,11 +32,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="tetrahedronRef"
-    :rotation="[-Math.PI / 2, 0, 0]"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="tetrahedronRef" :rotation="[-Math.PI / 2, 0, 0]">
     <TresTetrahedronGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Torus.vue

@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="torusRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="torusRef">
     <TresTorusGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/TorusKnot.vue

@@ -35,10 +35,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="torusKnotRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="torusKnotRef">
     <TresTorusKnotGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />

src/core/shapes/Tube.vue

@@ -46,10 +46,7 @@ defineExpose({
 </script>
 
 <template>
-  <TresMesh
-    ref="tubeRef"
-    v-bind="$attrs"
-  >
+  <TresMesh ref="tubeRef">
     <TresTubeGeometry :args="args" />
     <slot>
       <TresMeshBasicMaterial :color="color" />