docs: added plane

docs/.vitepress/config.ts

@@ -81,6 +81,10 @@ export default defineConfig({
               { text: 'FBXModel', link: '/cientos/loaders/fbx-model' },
             ],
           },
+          {
+            text: 'Shapes',
+            items: [{ text: 'Plane', link: '/cientos/shapes/plane' }],
+          },
           {
             text: 'Misc',
             items: [{ text: 'useTweakpane', link: '/cientos/misc/use-tweakpane' }],

docs/cientos/shapes/plane.md

@@ -0,0 +1,20 @@
+# Plane
+
+![](/cientos/plane.png)
+
+The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+::: info
+A convenient default rotation is applied to the _x-axis_ of the plane (`-Math.PI / 2`), so that it is facing up (along the Y axis).
+:::
+
+## Usage
+
+```html
+<Plane :args="[1, 1]" color="teal" />
+
+// Plane with a custom material transformations
+<Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="teal" />
+</Plane>
+```

packages/tres/src/components/Shapes.vue

@@ -25,7 +25,7 @@ watch(planeRef, plane => {
     <OrbitControls />
     <TresScene>
       <TresAmbientLight :color="0xffffff" :intensity="0.5" />
-      <Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]" :scale="[1.5, 2, 0.2]">
+      <Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
         <TresMeshToonMaterial color="teal" />
       </Plane>
     </TresScene>