Events (v0.2)

You can easily handle mouse or touch events on your meshes.

TIP

To be able to handle events on ThreeJS objects, TroisJS use raycasting.

Read more : https://threejs.org/docs/#api/en/core/Raycaster

Mesh Events

You can use the following props to handle events on a Mesh or InstancedMesh:

NameDescriptionEvent typeParameters
onPointerEnterWhen the pointer enter a meshpointerenter{ type, over: true, component, intersect }
onPointerOverWhen the pointer enter or leave a meshpointerover{ type, over, component, intersect? }
onPointerMoveWhen the pointer move over a meshpointermove{ type, component, intersect }
onPointerLeaveWhen the pointer leave a meshpointerleave{ type, over: false, component }
onClickWhen the pointer click on a meshclick{ type, component, intersect }

Example :

<template>
  <Renderer antialias resize="window">
    <Camera :position="{ z: 10 }" />
    <Scene>
      <PointLight :position="{ y: 10, z: 10 }" />
      <Box
        @pointerEnter="onPointerEvent"
        @pointerOver="onPointerOver"
        @pointerMove="onPointerEvent"
        @pointerLeave="onPointerEvent"
        @click="onPointerEvent"
      >
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

<script>
export default {
  methods: {
    onPointerEvent(event) {
      console.log(event);
    },
    onPointerOver(event) {
      event.component.mesh.material.color.set(event.over ? 0xff0000 : 0xffffff);
    },
  },
};
</script>

Raycaster Component

If you need to easily handle pointer events on all your scene's meshes, you can use Raycaster component :

<template>
  <Renderer antialias resize="window">
    <Camera :position="{ z: 10 }" />
    <Raycaster
      @pointerEnter="onPointerEvent"
      @pointerOver="onPointerOver"
      @pointerMove="onPointerEvent"
      @pointerLeave="onPointerEvent"
      @click="onPointerEvent"
    />
    <Scene>
      <PointLight :position="{ y: 10, z: 10 }" />
      <Box v-for="i in 5" :position="{ x: -6 + i * 2 }">
        <LambertMaterial />
      </Box>
    </Scene>
  </Renderer>
</template>

<script>
export default {
  methods: {
    onPointerEvent(event) {
      console.log(event);
    },
    onPointerOver(event) {
      event.component.mesh.material.color.set(event.over ? 0xff0000 : 0xffffff);
    },
  },
};
</script>

intersectMode

By default, raycasting will be made on pointer move, but it can be useful to do the same on every frame.

If using mesh events, you should set pointer prop on Renderer :

<Renderer :pointer="{ intersectMode: 'frame' }">
  ...
</Renderer>

If using Raycaster component, you should set intersect-mode prop :

<Raycaster intersect-mode="frame" />