Merge pull request #144 from Tresjs/bugfix/cientos-types-docs

Bugfix/cientos types docs

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 {any[]}
+   * @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/OrbitControls.vue

@@ -5,18 +5,54 @@ import { ref, watch, unref, type Ref } from 'vue'
 
 import { useCientos } from './useCientos'
 
-const props = withDefaults(
-  defineProps<{
-    makeDefault?: boolean
-    camera?: Camera
-    domElement?: HTMLElement
-    target?: Ref<Vector3>
-    enableDamping?: boolean
-  }>(),
-  {
-    makeDefault: false,
-  },
-)
+export interface OrbitControlsProps {
+  /**
+   * Whether to make this the default controls.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  makeDefault?: boolean
+  /**
+   * The camera to control.
+   *
+   * @type {Camera}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  camera?: Camera
+  /**
+   * The dom element to listen to.
+   *
+   * @type {HTMLElement}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  domElement?: HTMLElement
+  /**
+   * The target to orbit around.
+   *
+   * @type {Ref<Vector3>}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  target?: Ref<Vector3>
+  /**
+   * Whether to enable damping.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  enableDamping?: boolean
+}
+
+const props = withDefaults(defineProps<OrbitControlsProps>(), {
+  makeDefault: false,
+})
 
 const { state, setState, extend } = useCientos()
 
@@ -37,7 +73,7 @@ watch(controls, value => {
   <TresOrbitControls
     v-if="state.camera && state.renderer"
     ref="controls"
-    :args="[unref(state.camera), state.renderer?.domElement]"
+    :args="[unref(state.camera) || camera, state.renderer?.domElement || domElement]"
     :enabling-dampling="enableDamping"
   />
 </template>

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()