docs: instances, arguments

docs/api/instances-arguments-and-props.md

@@ -1 +1,72 @@
-# Instances
+# Instances
+
+The core idea of **Tres** is an _autogenerated catalogue_ of all the ThreeJS elements. This catalogue is generated from the ThreeJS source code, so it's always up to date.
+
+When using ThreeJS, you need to import the elements you want to use. For example, if you want to use a `PerspectiveCamera`, you need to import it from the `three` package:
+
+```js
+import { PerspectiveCamera } from 'three'
+
+const camera = new PerspectiveCamera(45, width / height, 1, 1000)
+```
+
+With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+## Declaring objects
+
+If we follow this argument, you should be able to lay out an instance like this: ❌
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="new THREE.Vector3(1, 2, 3)" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+But with **Tres** this is not needed, you can define properties declaratively like this: ✅
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera visible :position="[1, 2, 3]" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+## Arguments
+
+Some ThreeJS objects have arguments, for example, the `PerspectiveCamera` constructor has the following arguments:
+
+- `fov` - Camera frustum vertical field of view.
+- `aspect` - Camera frustum aspect ratio.
+- `near` - Camera frustum near plane.
+- `far` - Camera frustum far plane.
+
+To pass these arguments to the `TresPerspectiveCamera` component, you can use the `args` prop:
+
+```vue
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+This is the same as doing this:
+
+```ts
+const camera = new PerspectiveCamera(45, 1, 0.1, 1000)
+```