docs: extending

docs/advanced/extending.md

@@ -2,38 +2,17 @@
 
 Tres offers bare bones functionality, but it's easy to add third-party elements and extend them into its internal catalogue.
 
-## Adding a third-party element
-
-Most of 3D experience uses `OrbitControls` which is not part of the core library. To add it, you need to import it and add it to the `extends` option when installing the plugin:
+Most of 3D experience uses `OrbitControls` which is not part of the core library. You can add it to your project by importing it from the `three/examples/jsm/controls/OrbitControls` module.
 
 ```js
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-app.use(plugin, {
-  extends: {
-    OrbitControls,
-  },
-})
 ```
 
-This will automatically add a `<TresOrbitControls>` to the catalogue, so you can use it in your templates:
-
-```vue
-<template>
-  <TresCanvas shadows alpha>
-    <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresScene>
-      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-    </TresScene>
-  </TresCanvas>
-</template>
-```
-
-## Extending an element dynamically <Badge type="tip" text="^1.1.0" />
+## Extending an element dynamically
 
 Or you can also add it dynamically in your components:
 
-```vue{2,3,5,8,17,19}
+```vue {2,3,5,8,17,19}
 <script setup lang="ts">
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
@@ -42,20 +21,16 @@ const { extend } = useCatalogue()
 
 // Add the element to the catalogue
 extend({ TextGeometry, OrbitControls })
-
-/* Rest of the code */
 </script>
 
 <template>
   <TresCanvas shadows alpha>
     <TresPerspectiveCamera :position="[5, 5, 5]" />
-    <TresScene>
-      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
-      <TresMesh>
-        <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
-        <TresMeshMatcapMaterial :matcap="matcapTexture" />
-      </TresMesh>
-    </TresScene>
+    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+    <TresMesh>
+      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+      <TresMeshMatcapMaterial :matcap="matcapTexture" />
+    </TresMesh>
   </TresCanvas>
 </template>
 ```