feat(cientos): shapes types

packages/cientos/src/core/Box.vue

@@ -1,17 +1,31 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
+
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 1, 1],
-    color: '0xffffff',
-  },
-)
+export interface BoxProps extends TresObject {
+  /**
+   * The width, height and depth of the box.
+   * @default [1, 1, 1]
+   * @type {number[]}
+   * @memberof BoxProps
+   * @see https://threejs.org/docs/#api/en/geometries/BoxGeometry
+   *
+   */
+  args?: number[]
+  /**
+   * The color of the box.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof BoxProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+withDefaults(defineProps<BoxProps>(), {
+  args: () => [1, 1, 1],
+  color: '0xffffff',
+})
 
 const boxRef = shallowRef()
 

packages/cientos/src/core/Circle.vue

@@ -1,14 +1,32 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
+export interface CircleProps extends TresObject {
+  /**
+   * The radius, segment, thetaStart, thetaLength of the circle.
+   * @default [1, 32, 0, Math.PI * 2]
+   * @type {number[]}
+   * @memberof CircleProps
+   * @see https://threejs.org/docs/#api/en/geometries/CircleGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the circle.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof CircleProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
 withDefaults(
   defineProps<{
     args?: number[]
     color?: TresColor
   }>(),
   {
-    args: () => [1, 32],
+    args: () => [1, 32, 0, Math.PI * 2],
     color: '0xffffff',
   },
 )

packages/cientos/src/core/Cone.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 1, 12],
-    color: '0xffffff',
-  },
-)
+export interface ConeProps extends TresObject {
+  /**
+   * The radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength of the cone.
+   * @default [1, 1, 12, false, 0, Math.PI * 2]
+   * @type {number[]}
+   * @memberof ConeProps
+   * @see https://threejs.org/docs/#api/en/geometries/ConeGeometry
+   */
+  args?: [number, number, number, boolean, number, number]
+  /**
+   * The color of the cone.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof ConeProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+withDefaults(defineProps<ConeProps>(), {
+  args: () => [1, 1, 12, false, 0, Math.PI * 2],
+  color: '0xffffff',
+})
 
 const coneRef = shallowRef()
 

packages/cientos/src/core/Dodecahedron.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 0],
-    color: '0xffffff',
-  },
-)
+export interface DodecahedronProps extends TresObject {
+  /**
+   * The radius and detail of the dodecahedron.
+   * @default [1, 0]
+   * @type {number[]}
+   * @memberof DodecahedronProps
+   * @see https://threejs.org/docs/#api/en/geometries/DodecahedronGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the dodecahedron.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof DodecahedronProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+withDefaults(defineProps<DodecahedronProps>(), {
+  args: () => [1, 0],
+  color: '0xffffff',
+})
 
 const dodecahedronRef = shallowRef()
 

packages/cientos/src/core/Icosahedron.vue

@@ -1,17 +1,29 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 0],
-    color: '0xffffff',
-  },
-)
+export interface IcosahedronProps extends TresObject {
+  /**
+   * The radius and detail of the icosahedron.
+   * @default [1, 0]
+   * @type {number[]}
+   * @memberof IcosahedronProps
+   * @see https://threejs.org/docs/#api/en/geometries/IcosahedronGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the icosahedron.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof IcosahedronProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+withDefaults(defineProps<IcosahedronProps>(), {
+  args: () => [1, 0],
+  color: '0xffffff',
+})
 
 const icosahedronRef = shallowRef()
 

packages/cientos/src/core/Octahedron.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 0],
-    color: '0xffffff',
-  },
-)
+export interface OctahedronProps extends TresObject {
+  /**
+   * The radius and detail of the octahedron.
+   * @default [1, 0]
+   * @type {number[]}
+   * @memberof OctahedronProps
+   * @see https://threejs.org/docs/#api/en/geometries/OctahedronGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the octahedron.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof OctahedronProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+withDefaults(defineProps<OctahedronProps>(), {
+  args: () => [1, 0],
+  color: '0xffffff',
+})
 
 const octahedronRef = shallowRef()
 

packages/cientos/src/core/Plane.vue

@@ -1,7 +1,26 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
+export interface PlaneProps extends TresObject {
+  /**
+   * The width and height, widthSegments, heightSegments of the plane.
+   * @default [1, 1, 1, 1]
+   * @type {number[]}
+   * @memberof PlaneProps
+   * @see https://threejs.org/docs/#api/en/geometries/PlaneGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the plane.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof PlaneProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
 withDefaults(
   defineProps<{
     args?: number[]

packages/cientos/src/core/Ring.vue

@@ -1,17 +1,29 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [0.5, 1, 32],
-    color: '0xffffff',
-  },
-)
+export interface RingProps extends TresObject {
+  /**
+   * The innerRadius, outerRadius, thetaSegments, phiSegments, tethaStart, thetaLength of the ring.
+   * @default [0.5, 1, 32, 1, 0, Math.PI * 2]
+   * @type {number[]}
+   * @memberof RingProps
+   * @see https://threejs.org/docs/#api/en/geometries/RingGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the ring.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof RingProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+withDefaults(defineProps<RingProps>(), {
+  args: () => [0.5, 1, 32],
+  color: '0xffffff',
+})
 
 const ringRef = shallowRef()
 

packages/cientos/src/core/Sphere.vue

@@ -1,17 +1,31 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [2, 32, 16],
-    color: '0xffffff',
-  },
-)
+export interface SphereProps extends TresObject {
+  /**
+   * The radius, widthSegments, heightSegments, phiStart phiLength,
+   * thetaStart and thetaLength of the sphere.
+   * @default [2, 32, 16, 0, Math.PI * 2, 0, Math.PI]
+   * @type {number[]}
+   * @memberof SphereProps
+   * @see https://threejs.org/docs/#api/en/geometries/SphereGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the sphere.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof SphereProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+withDefaults(defineProps<SphereProps>(), {
+  args: () => [2, 32, 16],
+  color: '0xffffff',
+})
 
 const sphereRef = shallowRef()
 

packages/cientos/src/core/Tetrahedron.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 0],
-    color: '0xffffff',
-  },
-)
+export interface TetrahedronProps extends TresObject {
+  /**
+   * The radius and detail of the tetrahedron.
+   * @default [1, 0]
+   * @type {number[]}
+   * @memberof TetrahedronProps
+   * @see https://threejs.org/docs/#api/en/geometries/TetrahedronGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the tetrahedron.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof TetrahedronProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+withDefaults(defineProps<TetrahedronProps>(), {
+  args: () => [1, 0],
+  color: '0xffffff',
+})
 
 const tetrahedronRef = shallowRef()
 

packages/cientos/src/core/Torus.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 1, 16, 80],
-    color: '0xffffff',
-  },
-)
+export interface TorusProps extends TresObject {
+  /**
+   * The radius, tube, radialSegments, tubularSegments, arc of the torus.
+   * @default [1, 1, 16, 80, Math.PI * 2]
+   * @type {number[]}
+   * @memberof TorusProps
+   * @see https://threejs.org/docs/#api/en/geometries/TorusGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the torus.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof TorusProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+withDefaults(defineProps<TorusProps>(), {
+  args: () => [1, 1, 16, 80],
+  color: '0xffffff',
+})
 
 const torusRef = shallowRef()
 

packages/cientos/src/core/TorusKnot.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-withDefaults(
-  defineProps<{
-    args?: number[]
-    color?: TresColor
-  }>(),
-  {
-    args: () => [1, 0.4, 64, 8],
-    color: '0xffffff',
-  },
-)
+export interface TorusKnotProps extends TresObject {
+  /**
+   * The radius, tube, radialSegments, tubularSegments and p, q of the torus knot.
+   * @default [1, 0.4, 64, 8, 2, 3]
+   * @type {number[]}
+   * @memberof TorusKnotProps
+   * @see https://threejs.org/docs/#api/en/geometries/TorusKnotGeometry
+   */
+  args?: number[]
+  /**
+   * The color of the torus knot.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof TorusKnotProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+withDefaults(defineProps<TorusKnotProps>(), {
+  args: () => [1, 0.4, 64, 8],
+  color: '0xffffff',
+})
 
 const torusKnotRef = shallowRef()
 

packages/cientos/src/core/Tube.vue

@@ -1,28 +1,40 @@
 <script setup lang="ts">
-import { TresColor } from '@tresjs/core/dist/types'
+import { TresColor, TresObject } from '@tresjs/core'
 import { CatmullRomCurve3, CubicBezierCurve3, LineCurve3, QuadraticBezierCurve3, Vector3 } from 'three'
 import { shallowRef } from 'vue'
 
-type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
+export type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
+export type TubeGeometryParams = [CurveType, number, number, number, boolean]
 
-type TubeGeometryParams = [CurveType, number, number, number, boolean]
+export interface TubeProps extends TresObject {
+  /**
+   * The curve, segments, radius, radialSegments, closed.
+   * @default [new QuadraticBezierCurve3(new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)), 20, 0.2, 8, false]
+   * @type {TubeGeometryParams}
+   * @memberof TubeProps
+   * @see https://threejs.org/docs/#api/en/geometries/TubeGeometry
+   */
+  args?: TubeGeometryParams
+  /**
+   * The color of the tube.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof TubeProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
 
-withDefaults(
-  defineProps<{
-    args?: TubeGeometryParams
-    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',
-  },
-)
+withDefaults(defineProps<TubeProps>(), {
+  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()
 

packages/tres/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTweakPane } from '@tresjs/cientos'
-import TheEnvironment from '/@/components/TheEnvironment.vue'
+import Shapes from '/@/components/Shapes.vue'
 // import TheEvents from '/@/components/TheEvents.vue'
 
 useTweakPane()
@@ -8,7 +8,7 @@ useTweakPane()
 
 <template>
   <Suspense>
-    <TheEnvironment />
+    <Shapes />
   </Suspense>
 </template>
 

packages/tres/src/types/index.ts

@@ -3,6 +3,16 @@ import { VNode, VNodeTypes } from 'vue'
 
 export type TresInstance = Object3D<Event> & { [key: string]: any }
 
+export type TresObject = Object3D<Event> & {
+  position?: TresVectorProp
+  rotation?: TresVectorProp
+  scale?: TresVectorProp
+  color?: TresColor
+  opacity?: number
+  visible?: boolean
+  [key: string]: any
+}
+
 export type TresCatalogue = Record<string, any>
 export type TresVNodeType = VNodeTypes & {
   name?: string | Array<string>
@@ -12,6 +22,7 @@ export type TresVNodeType = VNodeTypes & {
 export type TresVNode = VNode & { children?: Array<VNode | { default: any }>; type: TresVNodeType }
 export type TresAttributes = Record<string, any> & { args?: number[] }
 
+export type TresVectorProp = Vector2 | Vector3 | number[] | number
 export type TresColor = string | number | Color | number[]
 
 export interface TresEvent extends Intersection<Object3D<Event>> {