Browse Source

docs: event docs

Alvaro 2 years ago
parent
commit
36bfc5b759
3 changed files with 32 additions and 1 deletions
  1. 4 0
      docs/.vitepress/config.ts
  2. 27 0
      docs/api/events.md
  3. 1 1
      docs/index.md

+ 4 - 0
docs/.vitepress/config.ts

@@ -32,6 +32,10 @@ export default defineConfig({
             text: 'Composables',
             link: '/api/composables',
           },
+          {
+            text: 'Events',
+            link: '/api/events',
+          },
         ],
       },
       {

+ 27 - 0
docs/api/events.md

@@ -0,0 +1,27 @@
+# Events <Badge type="warning" text="^1.6.0" />
+
+**TresJS** Mesh objects emit pointer events when they are interacted with using `raycaster` and `pointer` objects under the hood.
+
+```html
+<TresMesh
+  @click="(ev) => console.log('click', ev)"
+  @pointer-move="(ev) => console.log('click', ev)"
+  @pointer-enter="(ev) => console.log('click', ev)"
+  @pointer-leave="(ev) => console.log('click', ev)"
+/>
+```
+
+## Event Data
+
+The event data is a `TresEvent` object that contains the following properties:
+
+```ts
+;({
+  object: Object3D, // The mesh object that emitted the event
+  distance: number, // The distance between the camera and the mesh
+  point: Vector3, // The intersection point between the ray and the mesh
+  uv: Vector2, // The uv coordinates of the intersection point
+  face: Face3, // The face of the mesh that was intersected
+  faceIndex: number, // The index of the face that was intersected
+})
+```

+ 1 - 1
docs/index.md

@@ -6,7 +6,7 @@ titleTemplate: The solution for 3D on VueJS
 
 hero:
   name: TresJS
-  text: Bring ThreeJS to VueJS ecosystem
+  text: Bring Three to the Vue ecosystem
   tagline: Create awesome 3D experiences with the framework you love.
   image:
     src: /hero.png