feat(cientos): torus knot abstraction

packages/cientos/src/core/TorusKnot.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 0.4, 64, 8],
+    color: '0xffffff',
+  },
+)
+
+const torusKnotRef = shallowRef()
+
+defineExpose({
+  value: torusKnotRef,
+})
+</script>
+<template>
+  <TresMesh ref="torusKnotRef" v-bind="$attrs">
+    <TresTorusKnotGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/index.ts

@@ -9,6 +9,7 @@ import Plane from './core/Plane.vue'
 import Box from './core/Box.vue'
 import Sphere from './core/Sphere.vue'
 import Torus from './core/Torus.vue'
+import TorusKnot from './core/TorusKnot.vue'
 
 export * from './core/useGLTF'
 export * from './core/useFBX'
@@ -24,5 +25,6 @@ export {
   Box,
   Sphere,
   Torus,
+  TorusKnot,
   useAnimations,
 }

packages/tres/src/components/Shapes.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
 import { reactive, shallowRef, watch } from 'vue'
-import { Plane, Box, Sphere, Torus, OrbitControls } from '../../../cientos/src/'
+import { Plane, Box, Sphere, Torus, TorusKnot, OrbitControls } from '../../../cientos/src/'
 
 const state = reactive({
   clearColor: '#82DBC5',
@@ -16,6 +16,7 @@ const state = reactive({
 const planeRef = shallowRef()
 const boxRef = shallowRef()
 const torusRef = shallowRef()
+const torusKnotRef = shallowRef()
 
 watch(planeRef, plane => {
   console.log('plane', plane.value.position)
@@ -26,6 +27,9 @@ watch(boxRef, box => {
 watch(torusRef, torus => {
   console.log('torus', torus.value.position)
 })
+watch(torusKnotRef, torusKnot => {
+  console.log('torusKnot', torusKnot.value.position)
+})
 </script>
 <template>
   <TresCanvas v-bind="state">
@@ -46,6 +50,9 @@ watch(torusRef, torus => {
       <Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]" cast-shadow>
         <TresMeshToonMaterial color="cyan" />
       </Torus>
+      <TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]" cast-shadow>
+        <TresMeshToonMaterial color="lime" />
+      </TorusKnot>
     </TresScene>
   </TresCanvas>
 </template>