Merge pull request #91 from Tresjs/feature/60-shapes-abstraction

Draft: feat(cientos): shapes abstraction

docs/.vitepress/config.ts

@@ -90,7 +90,21 @@ export default defineConfig({
           },
           {
             text: 'Shapes',
-            items: [{ text: 'Plane', link: '/cientos/shapes/plane' }],
+            items: [
+              { text: 'Box', link: '/cientos/shapes/box' },
+              { text: 'Circle', link: '/cientos/shapes/circle' },
+              { text: 'Cone', link: '/cientos/shapes/cone' },
+              { text: 'Dodecahedron', link: '/cientos/shapes/dodecahedron' },
+              { text: 'Icosahedron', link: '/cientos/shapes/icosahedron' },
+              { text: 'Octahedron', link: '/cientos/shapes/octahedron' },
+              { text: 'Plane', link: '/cientos/shapes/plane' },
+              { text: 'Ring', link: '/cientos/shapes/ring' },
+              { text: 'Sphere', link: '/cientos/shapes/sphere' },
+              { text: 'Tetrahedron', link: '/cientos/shapes/tetrahedron' },
+              { text: 'Torus', link: '/cientos/shapes/torus' },
+              { text: 'TorusKnot', link: '/cientos/shapes/torus-knot' },
+              { text: 'Tube', link: '/cientos/shapes/tube' },
+            ],
           },
           {
             text: 'Misc',

docs/cientos/shapes/box.md

@@ -0,0 +1,29 @@
+# Box
+
+![](/cientos/box.png)
+
+The `cientos` package provides a `<Box />` component that serves as a short-cut for a `BoxGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  width: number,
+  height: number,
+  depth: number,
+  widthSegments: number,
+  heightSegments: number,
+  depthSegments: number
+]
+```
+
+Reference: [BoxGeometry](https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry)
+
+## Usage
+
+```html
+<Box :args="[1, 1, 1]" color="orange" />
+
+// Box with a custom material transformations
+<Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Box>
+```

docs/cientos/shapes/circle.md

@@ -0,0 +1,22 @@
+# Circle
+
+![](/cientos/circle.png)
+
+The `cientos` package provides a `<Circle />` component that serves as a short-cut for a `CircleGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, segments: number, thetaStart: number, thetaLength: number]
+```
+
+Reference: [CircleGeometry](https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry)
+
+## Usage
+
+```html
+<Circle :args="[1, 32]" color="lightsalmon" />
+
+// Circle with a custom material transformations
+<Circle ref="circleRef" :args="[1, 32]" :position="[0, 0, 0]">
+  <TresMeshToonMaterial color="lightsalmon" />
+</Circle>
+```

docs/cientos/shapes/cone.md

@@ -0,0 +1,30 @@
+# Cone
+
+![](/cientos/cone.png)
+
+The `cientos` package provides a `<Cone />` component that serves as a short-cut for a `ConeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  height: number,
+  radialSegments: number,
+  heightSegments: number,
+  openEnded: boolean,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [ConeGeometry](https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry)
+
+## Usage
+
+```html
+<Cone :args="[1, 1, 8]" color="orange" />
+
+// Cone with a custom material transformations
+<Cone ref="coneRef" :args="[1, 1, 8]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Cone>
+```

docs/cientos/shapes/dodecahedron.md

@@ -0,0 +1,22 @@
+# Dodecahedron
+
+![](/cientos/dodecahedron.png)
+
+The `cientos` package provides a `<Dodecahedron />` component that serves as a short-cut for a `DodecahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [DodecahedronGeometry](https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry)
+
+## Usage
+
+```html
+<Dodecahedron :args="[1, 0]" color="deeppink" />
+
+// Dodecahedron with a custom material transformations
+<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="deeppink" />
+</Dodecahedron>
+```

docs/cientos/shapes/icosahedron.md

@@ -0,0 +1,22 @@
+# Icosahedron
+
+![](/cientos/icosahedron.png)
+
+The `cientos` package provides a `<Icosahedron />` component that serves as a short-cut for a `IcosahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [IcosahedronGeometry](https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry)
+
+## Usage
+
+```html
+<Icosahedron :args="[1, 0]" color="red" />
+
+// Icosahedron with a custom material transformations
+<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="red" />
+</Icosahedron>
+```

docs/cientos/shapes/octahedron.md

@@ -0,0 +1,22 @@
+# Octahedron
+
+![](/cientos/octahedron.png)
+
+The `cientos` package provides a `<Octahedron />` component that serves as a short-cut for a `OctahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [OctahedronGeometry](https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry)
+
+## Usage
+
+```html
+<Octahedron :args="[1, 0]" color="red" />
+
+// Octahedron with a custom material transformations
+<Octahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="red" />
+</Octahedron>
+```

docs/cientos/shapes/plane.md

@@ -4,6 +4,12 @@
 
 The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
 
+```typescript
+args: [width: number, height: number, widthSegments: number, heightSegments: number]
+```
+
+Reference: [PlaneGeometry](https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry)
+
 ::: info
 A convenient default rotation is applied to the _x-axis_ of the plane (`-Math.PI / 2`), so that it is facing up (along the Y axis).
 :::

docs/cientos/shapes/ring.md

@@ -0,0 +1,29 @@
+# Ring
+
+![](/cientos/ring.png)
+
+The `cientos` package provides a `<Ring />` component that serves as a short-cut for a `RingGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  innerRadius: number,
+  outerRadius: number,
+  thetaSegments: number,
+  phiSegments: number,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [RingGeometry](https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry)
+
+## Usage
+
+```html
+<Ring :args="[0.5, 1, 32]" color="purple" />
+
+// Ring with a custom material transformations
+<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="purple" />
+</Ring>
+```

docs/cientos/shapes/sphere.md

@@ -0,0 +1,30 @@
+# Sphere
+
+![](/cientos/sphere.png)
+
+The `cientos` package provides a `<Sphere />` component that serves as a short-cut for a `SphereGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  widthSegments: number,
+  heightSegments: number,
+  phiStart: number,
+  phiLength: number,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [SphereGeometry](https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry)
+
+## Usage
+
+```html
+<Sphere :args="[1, 1, 1]" color="pink" />
+
+// Sphere with a custom material transformations
+<Sphere ref="planeRef" :args="[1, 1, 1]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="pink" />
+</Sphere>
+```

docs/cientos/shapes/tetrahedron.md

@@ -0,0 +1,22 @@
+# Tetrahedron
+
+![](/cientos/tetrahedron.png)
+
+The `cientos` package provides a `<Tetrahedron />` component that serves as a short-cut for a `TetrahedronGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [radius: number, detail: number]
+```
+
+Reference: [TetrahedronGeometry](https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry)
+
+## Usage
+
+```html
+<Tetrahedron :args="[1, 0]" color="yellow" />
+
+// Tetrahedron with a custom material transformations
+<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="yellow" />
+</Tetrahedron>
+```

docs/cientos/shapes/torus-knot.md

@@ -0,0 +1,29 @@
+# TorusKnot
+
+![](/cientos/torus-knot.png)
+
+The `cientos` package provides a `<TorusKnot />` component that serves as a short-cut for a `TorusKnotGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  tube: number,
+  tubularSegments: number,
+  radialSegments: number,
+  p: number,
+  q: number
+]
+```
+
+Reference: [TorusKnotGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry)
+
+## Usage
+
+```html
+<TorusKnot :args="[0.6, 0.2, 64, 8]" color="lime" />
+
+// TorusKnot with a custom material transformations
+<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]">
+  <TresMeshToonMaterial color="lime" />
+</TorusKnot>
+```

docs/cientos/shapes/torus.md

@@ -0,0 +1,28 @@
+# Torus
+
+![](/cientos/torus.png)
+
+The `cientos` package provides a `<Torus />` component that serves as a short-cut for a `TorusGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+args: [
+  radius: number,
+  tube: number,
+  radialSegments: number,
+  tubularSegments: number,
+  arc: number
+]
+```
+
+Reference: [TorusGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry)
+
+## Usage
+
+```html
+<Torus :args="[2, 0.4, 42, 100]" color="cyan" />
+
+// Torus with a custom material transformations
+<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]">
+  <TresMeshToonMaterial color="cyan" />
+</Torus>
+```

docs/cientos/shapes/tube.md

@@ -0,0 +1,50 @@
+# Tube
+
+![](/cientos/tube.png)
+
+The `cientos` package provides a `<Tube />` component that serves as a short-cut for a `TubeGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+```typescript
+<script>
+export default {
+  setup() {
+    const tubePath = ref(new CubicBezierCurve3(
+          new Vector3(-1, 0, 0),
+          new Vector3(-0.5, -1, 0),
+          new Vector3(0.5, 1, 0),
+          new Vector3(1, 0, 0),
+          ));
+
+    return {
+      tubePath
+    }
+  },
+}
+</script>
+```
+
+```typescript
+type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
+
+args: [
+  path: CurveType,
+  tubularSegments: number,
+  radius: number,
+  radialSegments: number,
+  closed: boolean
+]
+```
+
+Reference: [TubeGeometry](https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry)
+
+## Usage
+
+```html
+// TubeGeometry needs a curve path to be construct
+<Tube :args="[tubePath, 20, 0.2, 8, false]" color="lightblue" />
+
+// Tube with a custom material transformations
+<Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="lightblue" />
+</Tube>
+```

packages/cientos/src/core/Box.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, 1, 1],
+    color: '0xffffff',
+  },
+)
+
+const boxRef = shallowRef()
+
+defineExpose({
+  value: boxRef,
+})
+</script>
+<template>
+  <TresMesh ref="boxRef" v-bind="$attrs">
+    <TresBoxGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Circle.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, 32],
+    color: '0xffffff',
+  },
+)
+
+const circleRef = shallowRef()
+
+defineExpose({
+  value: circleRef,
+})
+</script>
+<template>
+  <TresMesh ref="circleRef" v-bind="$attrs">
+    <TresCircleGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Cone.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, 1, 12],
+    color: '0xffffff',
+  },
+)
+
+const coneRef = shallowRef()
+
+defineExpose({
+  value: coneRef,
+})
+</script>
+<template>
+  <TresMesh ref="coneRef" v-bind="$attrs">
+    <TresConeGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Dodecahedron.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],
+    color: '0xffffff',
+  },
+)
+
+const dodecahedronRef = shallowRef()
+
+defineExpose({
+  value: dodecahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="dodecahedronRef" v-bind="$attrs">
+    <TresDodecahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Icosahedron.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],
+    color: '0xffffff',
+  },
+)
+
+const icosahedronRef = shallowRef()
+
+defineExpose({
+  value: icosahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="icosahedronRef" v-bind="$attrs">
+    <TresIcosahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Octahedron.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],
+    color: '0xffffff',
+  },
+)
+
+const octahedronRef = shallowRef()
+
+defineExpose({
+  value: octahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="octahedronRef" v-bind="$attrs">
+    <TresOctahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Ring.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: () => [0.5, 1, 32],
+    color: '0xffffff',
+  },
+)
+
+const ringRef = shallowRef()
+
+defineExpose({
+  value: ringRef,
+})
+</script>
+<template>
+  <TresMesh ref="ringRef" v-bind="$attrs">
+    <TresRingGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Sphere.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: () => [2, 32, 16],
+    color: '0xffffff',
+  },
+)
+
+const sphereRef = shallowRef()
+
+defineExpose({
+  value: sphereRef,
+})
+</script>
+<template>
+  <TresMesh ref="sphereRef" v-bind="$attrs">
+    <TresSphereGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Tetrahedron.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],
+    color: '0xffffff',
+  },
+)
+
+const tetrahedronRef = shallowRef()
+
+defineExpose({
+  value: tetrahedronRef,
+})
+</script>
+<template>
+  <TresMesh ref="tetrahedronRef" :rotation="[-Math.PI / 2, 0, 0]" v-bind="$attrs">
+    <TresTetrahedronGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/core/Torus.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, 1, 16, 80],
+    color: '0xffffff',
+  },
+)
+
+const torusRef = shallowRef()
+
+defineExpose({
+  value: torusRef,
+})
+</script>
+<template>
+  <TresMesh ref="torusRef" v-bind="$attrs">
+    <TresTorusGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

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/core/Tube.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { CatmullRomCurve3, CubicBezierCurve3, LineCurve3, QuadraticBezierCurve3, Vector3 } from 'three'
+import { shallowRef } from 'vue'
+
+type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
+
+type TubeGeometryParams = [CurveType, number, number, number, boolean]
+
+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',
+  },
+)
+
+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

@@ -6,8 +6,41 @@ import { GLTFModel } from './core/useGLTF/component'
 import { FBXModel } from './core/useFBX/component'
 import Text3D from './core/Text3D.vue'
 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'
+import Circle from './core/Circle.vue'
+import Cone from './core/Cone.vue'
+import Tube from './core/Tube.vue'
+import Ring from './core/Ring.vue'
+import Tetrahedron from './core/Tetrahedron.vue'
+import Icosahedron from './core/Icosahedron.vue'
+import Octahedron from './core/Octahedron.vue'
+import Dodecahedron from './core/Dodecahedron.vue'
 
 export * from './core/useGLTF'
 export * from './core/useFBX'
 export * from './types'
-export { OrbitControls, TransformControls, useTweakPane, GLTFModel, FBXModel, Text3D, Plane, useAnimations }
+export {
+  OrbitControls,
+  TransformControls,
+  useTweakPane,
+  GLTFModel,
+  FBXModel,
+  Text3D,
+  Plane,
+  Box,
+  Sphere,
+  Torus,
+  TorusKnot,
+  Circle,
+  Cone,
+  Tube,
+  Ring,
+  Tetrahedron,
+  Icosahedron,
+  Octahedron,
+  Dodecahedron,
+  useAnimations,
+}

packages/tres/src/App.vue

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

packages/tres/src/components/Shapes.vue

@@ -1,7 +1,22 @@
 <script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
-import { reactive, shallowRef, watch } from 'vue'
-import { Plane, 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,
+  Ring,
+  TorusKnot,
+  Tetrahedron,
+  Icosahedron,
+  Octahedron,
+  Dodecahedron,
+  Circle,
+  Cone,
+  OrbitControls,
+} from '../../../cientos/src/'
 
 const state = reactive({
   clearColor: '#82DBC5',
@@ -14,20 +29,105 @@ const state = reactive({
 })
 
 const planeRef = shallowRef()
+const boxRef = shallowRef()
+const torusRef = shallowRef()
+const torusKnotRef = shallowRef()
+const circleRef = shallowRef()
+const tubeRef = shallowRef()
+const ringRef = shallowRef()
+const tetrahedronRef = shallowRef()
+const icosahedronRef = shallowRef()
+const octahedronRef = shallowRef()
+const dodecahedronRef = shallowRef()
 
 watch(planeRef, plane => {
   console.log('plane', plane.value.position)
 })
+watch(boxRef, box => {
+  console.log('box', box.value.position)
+})
+watch(torusRef, torus => {
+  console.log('torus', torus.value.position)
+})
+watch(torusKnotRef, torusKnot => {
+  console.log('torusKnot', torusKnot.value.position)
+})
+watch(circleRef, circle => {
+  console.log('circle', circle.value.position)
+})
+watch(tubeRef, tube => {
+  console.log('tube', tube.value.position)
+})
+watch(ringRef, ring => {
+  console.log('ring', ring.value.position)
+})
+watch(tetrahedronRef, tetrahedron => {
+  console.log('tetrahedron', tetrahedron.value.position)
+})
+watch(icosahedronRef, icosahedron => {
+  console.log('icosahedron', icosahedron.value.position)
+})
+watch(octahedronRef, octahedron => {
+  console.log('octahedron', octahedron.value.position)
+})
+watch(dodecahedronRef, dodecahedron => {
+  console.log('dodecahedron', dodecahedron.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" />
     <OrbitControls />
     <TresScene>
-      <TresAmbientLight :color="0xffffff" :intensity="0.5" />
-      <Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
+      <TresAmbientLight :color="0xffffff" :intensity="1" />
+      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+      <Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>
         <TresMeshToonMaterial color="teal" />
       </Plane>
+      <Box ref="boxRef" :arg0s="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="orange" />
+      </Box>
+      <Sphere ref="sphereRef" :args="[1, 32, 16]" :position="[2, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="pink" />
+      </Sphere>
+      <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>
+      <Circle ref="circleRef" :args="[0.9, 32]" :position="[0, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+        <TresMeshToonMaterial color="lightsalmon" :side="DoubleSide" />
+      </Circle>
+      <Cone ref="coneRef" :args="[1, 1, 6]" :position="[2, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+        <TresMeshToonMaterial color="slateblue" />
+      </Cone>
+      <Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[2, 6, -2]" cast-shadow>
+        <TresMeshToonMaterial color="lightblue" />
+      </Tube>
+      <Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[0, 6, -2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+        <TresMeshToonMaterial color="purple" :side="DoubleSide" />
+      </Ring>
+      <Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[-2, 6, -2]" cast-shadow>
+        <TresMeshToonMaterial color="yellow" />
+      </Tetrahedron>
+      <Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[-4, 6, -2]" cast-shadow>
+        <TresMeshToonMaterial color="red" />
+      </Icosahedron>
+      <Octahedron ref="octahedronRef" :args="[1, 0]" :position="[-4, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="greenyellow" />
+      </Octahedron>
+      <Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[-4, 6, 2]" cast-shadow>
+        <TresMeshToonMaterial color="deeppink" />
+      </Dodecahedron>
     </TresScene>
   </TresCanvas>
 </template>