docs: added groups docs

docs/.vitepress/config.ts

@@ -39,6 +39,7 @@ export default defineConfig({
         items: [
           { text: 'Orbit Controls', link: '/examples/orbit-controls' },
           { text: 'Basic Animations', link: '/examples/basic-animations' },
+          { text: 'Groups', link: '/examples/groups' },
           { text: 'Load Textures', link: '/examples/load-textures' },
           { text: 'Load Models', link: '/examples/load-models' },
           { text: 'Load Text', link: '/examples/text-3d' },

docs/examples/groups.md

@@ -0,0 +1,32 @@
+# Group <Badge type="warning" text="^1.5.0" />
+
+A `<TresGroup>` is an instance of the [THREE.Group](https://threejs.org/docs/#api/en/objects/Group) class which is almost the same as a [THREE.Object3D](https://threejs.org/docs/#api/en/objects/Object3D) but allows you to **group together multiple objects in the scene** so that they can be manipulated as a single unit (transform, rotation, etc).
+
+<StackBlitzEmbed projectId="tresjs-groups" />
+
+## Usage
+
+```vue{12,21}
+<script setup lang="ts">
+const groupRef = ref()
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (groupRef.value) {
+    groupRef.value.rotation.y += 0.01
+  }
+})
+</script>
+<template>
+  <TresGroup ref="groupRef" :position="[2,0,0]">
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshBasicMaterial color="red" />
+    </TresMesh>
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshBasicMaterial color="blue" />
+    </TresMesh>
+  </TresGroup>
+</template>
+```

packages/tres/src/components/TheGroups.vue

@@ -1,5 +1,17 @@
 <script setup lang="ts">
+import { useRenderLoop } from '/@/core/useRenderLoop'
+import { ref } from 'vue'
 import { OrbitControls } from '../../../cientos/src/'
+
+const { onLoop } = useRenderLoop()
+
+const groupRef = ref()
+
+onLoop(() => {
+  if (groupRef.value) {
+    groupRef.value.rotation.y += 0.01
+  }
+})
 </script>
 <template>
   <div class="container">
@@ -8,7 +20,7 @@ import { OrbitControls } from '../../../cientos/src/'
       <OrbitControls />
       <TresScene>
         <TresAmbientLight :color="0xffffff" :intensity="0.5" />
-        <TresGroup :position="[0, -4, -5]">
+        <TresGroup ref="groupRef" :position="[0, -4, -5]">
           <TresMesh :scale="1" :position="[-4, 0, 0]" cast-shadow>
             <TresSphereGeometry :args="[1, 500, 500]" />
             <TresMeshToonMaterial color="#FBB03B" />

packages/tres/vite.config.ts

@@ -18,6 +18,9 @@ import pkg from './package.json'
 console.log(`${lightGreen('▲')} ${gray('■')} ${yellow('●')} ${bold('Tres')} v${pkg.version}`)
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 5174,
+  },
   resolve: {
     alias: {
       '/@': resolve(__dirname, './src'),