feat(cientos): box abstraction

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/index.ts

@@ -6,8 +6,9 @@ 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'
 
 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, useAnimations }

packages/tres/src/App.vue

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

packages/tres/src/components/Shapes.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
 import { reactive, shallowRef, watch } from 'vue'
-import { Plane, OrbitControls } from '../../../cientos/src/'
+import { Plane, Box, OrbitControls } from '../../../cientos/src/'
 
 const state = reactive({
   clearColor: '#82DBC5',
@@ -24,10 +24,14 @@ watch(planeRef, plane => {
     <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="[8, 8]" :position="[0, 4, 0]" receive-shadow>
         <TresMeshToonMaterial color="teal" />
       </Plane>
+      <Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
+        <TresMeshToonMaterial color="orange" />
+      </Box>
     </TresScene>
   </TresCanvas>
 </template>