Nuxt+three.js mouse位置を正規化して状態管理する

はじめに

three.js用に正規化したmouse位置を状態管理したので備忘録として記事にしました。

バージョン

nuxt -> v3.0.0-rc.5

ソースコード

composables/mouse-position.ts

export const useMousePosition = () => {
    const mouse = {
      x: ref(0),
      y: ref(0)
    }
  // マウス位置を取得するメソッド
  const getMousePosition = (e) => {    
    const element = e.currentTarget
    const x = e.clientX - element.offsetLeft
    const y = e.clientY - element.offsetTop
    const w = element.offsetWidth
    const h = element.offsetHeight
    // マウス位置を正規化
    mouse.x.value = (x / w) * 2 - 1
    mouse.y.value = -(y / h) * 2 + 1
  }
  return {
    getMousePosition,
    mouse: readonly(mouse)
  }
}

使い方

hoge.vue

<script setup lang="ts">
const { getMousePosition, mouse } = useMousePosition()
</script>

<template>
  <!-- @mousemoveでgetMousePositionを実行 -->
  <div @mousemove="getMousePosition"></div>
  <!-- @clickでgetMousePositionを実行 -->
  <div @click="getMousePosition"></div>
</template>

さいごに

three.js用に正規化したマウス位置の状態管理についてまとめました。
three.jsのRaycasterと合わせて使えば便利です。