docs: added primitive

docs/.vitepress/config.ts

@@ -80,6 +80,7 @@ export default defineConfig({
 
         items: [
           { text: 'Extending', link: '/advanced/extending' },
+          { text: 'primitive', link: '/advanced/primitive' },
           {
             text: 'Caveats',
             link: '/advanced/caveats',

docs/advanced/primitive.md

@@ -0,0 +1,47 @@
+# Primitives
+
+The `<primitive />` component is a versatile  is a low-level component in TresJS that allows you to directly use any Three.js object within your Vue application without any abstraction. It acts as a bridge between Vue's reactivity system and Three.js's scene graph.
+
+## Usage
+
+```html
+<script setup lang="ts">
+  // Import necessary Three.js classes
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
+
+  // Create a box geometry and a basic material
+  const geometry = new BoxGeometry(1, 1, 1);
+  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+
+  // Create a mesh with the geometry and material
+  const meshWithMaterial = new Mesh(geometry, material);
+</script>
+
+<template>
+  <TresCanvas>
+    <primitive :object="meshWithMaterial" />
+  </TresCanvas>  
+</template>
+```
+
+## Props
+
+`object`: This prop expects a Three.js Object3D or any of its derived classes. It is the primary object that the `<primitive />` component will render. In the updated example, a `Mesh` object with an associated `Material` is passed to this prop.
+
+## Usage with Models 
+
+The `<primitive />` component is speciallly usefull to render complex objects like models loaded from external sources. The following example shows how to load a model from a GLTF file and render it using the `<primitive />` component.
+
+```html
+<script lang="ts" setup>
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } = await useGLTF('/models/AkuAku.gltf')
+</script>
+
+<TresCanvas>
+  <Suspense>
+    <primitive :object="nodes.AkuAku" />
+  </Suspense>
+</TresCanvas>
+```

docs/examples/load-models.md

@@ -23,7 +23,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 ```
 
-Then you can pass the model scene to a TresJS `primitive`:
+Then you can pass the model scene to a TresJS [`primitive`](/advanced/primitive) component to render it:
 
 ```html{3}
 <TresCanvas>
@@ -63,8 +63,13 @@ import { useGLTF } from '@tresjs/cientos'
 
 const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
 </script>
+
 <template>
-  <TresCanvas clear-color="#82DBC5" shadows alpha>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    alpha
+  >
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
     <Suspense>
@@ -96,7 +101,7 @@ import { OrbitControls, GLTFModel } from '@tresjs/cientos'
 
 This particular approach is more straightforward but gives you less control over the model.
 
-## useFBX
+## useFBX
 
 The `useFBX` composable is available from [@tresjs/cientos](https://github.com/Tresjs/tres/tree/main/packages/cientos) package.