feat(app): Add RoundedBox component

playground/src/components/TemplatePage.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas
+    window-size
+    clear-color="#111"
+  >
+    <TresPerspectiveCamera
+      :position="[0, 0, 3]"
+      :fov="45"
+      :aspect="1"
+      :near="0.1"
+      :far="1000"
+    />
+    <OrbitControls />
+    <TresMesh>
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshBasicMaterial :color="0x00ff00" />
+    </TresMesh>
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>

playground/src/pages/shapes/RoundedBoxDemo.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { shallowRef, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, RoundedBox } from '@tresjs/cientos'
+
+const boxRef = shallowRef()
+
+watch(boxRef, (box) => {
+  console.log(box)
+})
+</script>
+
+<template>
+  <TresCanvas
+    window-size
+    clear-color="#111"
+  >
+    <TresPerspectiveCamera
+      :position="[0, 0, 7]"
+      :fov="45"
+      :aspect="1"
+      :near="0.1"
+      :far="1000"
+    />
+    <OrbitControls />
+    <RoundedBox ref="boxRef">
+      <TresMeshBasicMaterial
+        :color="0x00ff00"
+        wireframe
+      />
+    </RoundedBox>
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>

playground/src/router/routes/shapes.ts

@@ -14,4 +14,9 @@ export const shapesRoutes = [
     name: 'Superformula',
     component: () => import('../../pages/shapes/SuperformulaDemo.vue'),
   },
+  {
+    path: '/shapes/roundedbox',
+    name: 'RoundedBox',
+    component: () => import('../../pages/shapes/RoundedBoxDemo.vue'),
+  },
 ]

src/core/shapes/RoundedBox.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useTresContext } from '@tresjs/core'
+import type { TresColor } from '@tresjs/core'
+import type { BoxGeometry } from 'three'
+import { RoundedBoxGeometry } from 'three-stdlib'
+
+import { shallowRef, toRefs } from 'vue'
+
+export interface BoxProps {
+  /**
+   * The width, height and depth, segments, radius.
+   * @default [1, 1, 1, 2, 0.1]
+   * @type {number[]}
+   * @memberof BoxProps
+   * @see https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js
+   *
+   */
+  args?: ConstructorParameters<typeof BoxGeometry>
+  /**
+   * The color of the box.
+   * @default 0xffffff
+   * @type {TresColor}
+   * @memberof BoxProps
+   * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+   */
+  color?: TresColor
+}
+
+const props = withDefaults(defineProps<BoxProps>(), { args: () => [1, 1, 1, 2, 0.1], color: '#ffffff' })
+
+const { args, color } = toRefs(props)
+
+const { extend } = useTresContext()
+
+extend({ RoundedBoxGeometry })
+
+const roundedBoxRef = shallowRef()
+
+defineExpose({ value: roundedBoxRef })
+</script>
+
+<template>
+  <TresMesh ref="roundedBoxRef">
+    <TresRoundedBoxGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

src/core/shapes/index.ts

@@ -8,6 +8,7 @@ import Line2 from './Line2.vue'
 import Octahedron from './Octahedron.vue'
 import Plane from './Plane.vue'
 import Ring from './Ring.vue'
+import RoundedBox from './RoundedBox.vue'
 import Sphere from './Sphere.vue'
 import Superformula from './Superformula.vue'
 import Tetrahedron from './Tetrahedron.vue'
@@ -26,6 +27,7 @@ export {
   Octahedron,
   Plane,
   Ring,
+  RoundedBox,
   Sphere,
   Superformula,
   Tetrahedron,