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

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/Text3D.vue

@@ -4,13 +4,13 @@ import { TextGeometry, FontLoader } from 'three-stdlib'
 import { computed, useSlots } from 'vue'
 import { useCientos } from './useCientos'
 
-type Glyph = {
+export type Glyph = {
   _cachedOutline: string[]
   ha: number
   o: string
 }
 
-type FontData = {
+export type FontData = {
   boundingBox: {
     yMax: number
     yMin: number
@@ -23,32 +23,109 @@ type FontData = {
   underlineThickness: number
 }
 
-const props = withDefaults(
-  defineProps<{
-    font: FontData | string
-    text?: string
-    size?: number
-    height?: number
-    curveSegments?: number
-    bevelEnabled?: boolean
-    bevelThickness?: number
-    bevelSize?: number
-    bevelOffset?: number
-    bevelSegments?: number
-    center?: boolean
-  }>(),
-  {
-    size: 0.5,
-    height: 0.2,
-    curveSegments: 5,
-    bevelEnabled: true,
-    bevelThickness: 0.05,
-    bevelSize: 0.02,
-    bevelOffset: 0,
-    bevelSegments: 4,
-    center: false,
-  },
-)
+export interface Text3DProps {
+  /**
+   *
+   *  The JSON font to use for the text.
+   *  Text3D requires fonts in JSON format generated through [typeface.json](http://gero3.github.io/facetype.js)
+   *
+   * @type {(FontData | string)}
+   * @memberof Text3DProps
+   * @see https://threejs.org/docs/index.html?q=TEXT#examples/en/geometries/TextGeometry
+   */
+  font: FontData | string
+  /**
+   * The text to display.
+   *
+   * @type {string}
+   * @memberof Text3DProps
+   */
+  text?: string
+  /**
+   * The size of the text.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.5
+   */
+  size?: number
+  /**
+   * The height of the text.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.2
+   */
+  height?: number
+  /**
+   * The curve segments of the text.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 5
+   */
+  curveSegments?: number
+  /**
+   * Turn on bevel
+   *
+   * @type {boolean}
+   * @memberof Text3DProps
+   * @default true
+   */
+  bevelEnabled?: boolean
+  /**
+   * How deep into text bevel goes.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.05
+   */
+  bevelThickness?: number
+  /**
+   * How far from text outline is bevel.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0.02
+   */
+  bevelSize?: number
+  /**
+   * How far from text outline is bevel.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 0
+   */
+  bevelOffset?: number
+  /**
+   * How many bevel segments.
+   *
+   * @type {number}
+   * @memberof Text3DProps
+   * @default 4
+   */
+  bevelSegments?: number
+  /**
+   * Whether to center the text.
+   *
+   * @type {boolean}
+   * @memberof Text3DProps
+   * @default false
+   */
+  center?: boolean
+}
+
+const props = withDefaults(defineProps<Text3DProps>(), {
+  size: 0.5,
+  height: 0.2,
+  curveSegments: 5,
+  bevelEnabled: true,
+  bevelThickness: 0.05,
+  bevelSize: 0.02,
+  bevelOffset: 0,
+  bevelSegments: 4,
+  center: false,
+})
 
 const { extend } = useCientos()
 

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/cientos/src/core/useEnvironment/component.ts

@@ -1,27 +1,13 @@
-import { EnvironmentOptions, EnvironmentPresetsType } from './const'
-import { CubeTexture, Texture, TextureEncoding } from 'three'
-import { defineComponent, PropType } from 'vue'
+import { EnvironmentOptions } from './const'
+import { CubeTexture, Texture } from 'three'
+import { defineComponent } from 'vue'
 
 import { useEnvironment } from '.'
 
-export const Environment = defineComponent({
+export const Environment = defineComponent<EnvironmentOptions>({
   name: 'Environment',
-  props: {
-    background: {
-      type: Boolean,
-      default: false,
-    },
-    blur: {
-      type: Number,
-      default: 0,
-    },
-    files: {
-      type: [String, Array],
-    },
-    encoding: Object as PropType<TextureEncoding>,
-    path: String,
-    preset: Object as PropType<EnvironmentPresetsType>,
-  },
+  props: ['background', 'blur', 'files', 'encoding', 'path', 'preset'] as unknown as undefined,
+
   async setup(props, { expose }) {
     let texture: Texture | CubeTexture | null = null
 

packages/cientos/src/core/useEnvironment/const.ts

@@ -5,12 +5,14 @@ export type EnvironmentOptions = {
    * If true, the environment will be set as the scene's background.
    *
    * @type {boolean}
+   * @default false
    */
   background?: boolean
   /**
    * The blur radius of the environment.
    *
    * @type {number}
+   * @default 0
    */
   blur?: number
   /**
@@ -24,6 +26,7 @@ export type EnvironmentOptions = {
    * The path to the files.
    *
    * @type {string}
+   * @default '/'
    */
   path?: string
   /**

packages/cientos/src/core/useEnvironment/index.ts

@@ -30,7 +30,7 @@ export async function useEnvironment({
   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
   blur = 0,
   background = false,
-  path = undefined,
+  path = '/',
   preset = undefined,
   encoding = undefined,
 }: Partial<EnvironmentOptions>): Promise<Texture | CubeTexture> {
@@ -64,10 +64,11 @@ export async function useEnvironment({
     texture.encoding = encoding ?? isCubeMap ? sRGBEncoding : LinearEncoding
   }
 
-  if (background && state.scene) {
+  if (state.scene) {
     state.scene.environment = texture
-    state.scene.background = texture
-
+    if (background !== undefined) {
+      state.scene.background = texture
+    }
     if (blur) {
       state.scene.backgroundBlurriness = blur | 0
     }

packages/cientos/src/core/useFBX/component.ts

@@ -3,17 +3,19 @@ import { defineComponent } from 'vue'
 import { useFBX } from '.'
 import { useCientos } from '../useCientos'
 
-export const FBXModel = defineComponent({
+export interface FBXModelProps {
+  /**
+   * Path to the FBX file.
+   *
+   * @type {string}
+   * @memberof FBXModelProps
+   * @required
+   */
+  path: string
+}
+export const FBXModel = defineComponent<FBXModelProps>({
   name: 'FBXModel',
-  props: {
-    /*
-     * The path to the FBX file.
-     */
-    path: {
-      type: String,
-      required: true,
-    },
-  },
+  props: ['path'] as unknown as undefined,
   async setup(props, { expose }) {
     const { state } = useCientos()
     let model: Object3D | null = null

packages/cientos/src/core/useGLTF/component.ts

@@ -2,25 +2,42 @@ import { defineComponent } from 'vue'
 import { useGLTF } from '.'
 import { useCientos } from '../useCientos'
 
-export const GLTFModel = defineComponent({
+export interface GLTFModelProps {
+  /**
+   *
+   * The path to the GLTF file.
+   *
+   * @type {string}
+   * @required
+   * @memberof GLTFModelProps
+   *
+   **/
+  path: string
+  /**
+   *
+   * Whether to use Draco compression.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof GLTFModelProps
+   *
+   **/
+  draco?: boolean
+  /**
+   *
+   * The path to the Draco decoder.
+   *
+   * @type {string}
+   * @default 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'
+   * @memberof GLTFModelProps
+   *
+   **/
+  decoderPath?: string
+}
+
+export const GLTFModel = defineComponent<GLTFModelProps>({
   name: 'GLTFModel',
-  props: {
-    /**
-     * The path to the GLTF file.
-     *
-     */
-    path: String,
-    /**
-     * Whether to use Draco compression.
-     *
-     */
-    draco: Boolean,
-    /**
-     * The path to the Draco decoder.
-     *
-     */
-    decoderPath: String,
-  },
+  props: ['path', 'draco', 'decoderPath'] as unknown as undefined,
 
   async setup(props, { expose }) {
     const { state } = useCientos()

packages/cientos/src/core/usePamCameraMouse/component.ts

@@ -1,29 +1,41 @@
-import { defineComponent } from 'vue'
+import { defineComponent, watchEffect } from 'vue'
 import { usePamCameraMouse } from '.'
 import { useCientos } from '../useCientos'
 
-export const PamCameraMouse = defineComponent({
+export interface PamCameraMouseProps {
+  /**
+   * Whether to disable the mouse controls.
+   * @type {boolean}
+   * @default false
+   * @memberof PamCameraMouseProps
+   *
+   */
+  disabled?: boolean
+  /**
+   * The factor to multiply the mouse movement by.
+   * @type {number}
+   * @default 5
+   * @memberof PamCameraMouseProps
+   *
+   **/
+  factor?: number
+}
+
+export const PamCameraMouse = defineComponent<PamCameraMouseProps>({
   name: 'PamCameraMouse',
-  props: {
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    factor: {
-      type: Number,
-      required: false,
-      default: 5,
-    },
-  },
-  setup(props: any) {
+  props: ['disabled', 'factor'] as unknown as undefined,
+  setup(props) {
     const { state } = useCientos()
-    const camera = state?.camera
 
-    const PamCameraMouse = usePamCameraMouse(props.disabled as boolean, props.factor as number, camera)
+    watchEffect(() => {
+      if (state?.camera) {
+        const camera = state?.camera
 
+        usePamCameraMouse(props.disabled as boolean, props.factor as number, camera)
+      }
+    })
     return () => {
-      PamCameraMouse
+      null
     }
   },
 })

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>> {