feat(cientos) tube abstraction

packages/cientos/src/core/Tube.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { QuadraticBezierCurve3, Vector3 } from 'three'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: any[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [
+      new QuadraticBezierCurve3(new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)),
+      20,
+      0.2,
+      8,
+      false,
+    ],
+    color: '0xffffff',
+  },
+)
+
+const tubeRef = shallowRef()
+
+defineExpose({
+  value: tubeRef,
+})
+</script>
+<template>
+  <TresMesh ref="tubeRef" v-bind="$attrs">
+    <TresTubeGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/index.ts

@@ -12,6 +12,7 @@ import Torus from './core/Torus.vue'
 import TorusKnot from './core/TorusKnot.vue'
 import Circle from './core/Circle.vue'
 import Cone from './core/Cone.vue'
+import Tube from './core/Tube.vue'
 
 export * from './core/useGLTF'
 export * from './core/useFBX'
@@ -30,5 +31,6 @@ export {
   TorusKnot,
   Circle,
   Cone,
+  Tube,
   useAnimations,
 }

packages/tres/src/components/Shapes.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { BasicShadowMap, DoubleSide, NoToneMapping, sRGBEncoding } from 'three'
-import { reactive, shallowRef, watch } from 'vue'
-import { Plane, Box, Sphere, Torus, TorusKnot, Circle, Cone, OrbitControls } from '../../../cientos/src/'
+import { BasicShadowMap, CubicBezierCurve3, DoubleSide, NoToneMapping, sRGBEncoding, Vector3 } from 'three'
+import { reactive, ref, shallowRef, watch } from 'vue'
+import { Plane, Tube, Box, Sphere, Torus, TorusKnot, Circle, Cone, OrbitControls } from '../../../cientos/src/'
 
 const state = reactive({
   clearColor: '#82DBC5',
@@ -18,6 +18,7 @@ const boxRef = shallowRef()
 const torusRef = shallowRef()
 const torusKnotRef = shallowRef()
 const circleRef = shallowRef()
+const tubeRef = shallowRef()
 
 watch(planeRef, plane => {
   console.log('plane', plane.value.position)
@@ -34,7 +35,17 @@ watch(torusKnotRef, torusKnot => {
 watch(circleRef, circle => {
   console.log('circle', circle.value.position)
 })
+watch(tubeRef, tube => {
+  console.log('tube', tube.value.position)
+})
+const tubePath = new CubicBezierCurve3(
+  new Vector3(-1, 0, 0),
+  new Vector3(-0.5, -1, 0),
+  new Vector3(0.5, 1, 0),
+  new Vector3(1, 0, 0),
+)
 </script>
+
 <template>
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
@@ -63,6 +74,9 @@ watch(circleRef, circle => {
       <Cone ref="coneRef" :args="[1, 1, 6]" :position="[2, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
         <TresMeshToonMaterial color="slateblue" :side="DoubleSide" />
       </Cone>
+      <Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[2, 6, -2]" cast-shadow>
+        <TresMeshToonMaterial color="slateblue" :side="DoubleSide" />
+      </Tube>
     </TresScene>
   </TresCanvas>
 </template>