🦔

React+TypeScriptなWebアプリで、R3Fのtutorial4.(マウスイベントの使い方)

2023/12/23に公開

Abstract

今回の参考はここ

Eventsをどう実装するかの話。
そんなに難くない。

結論

今回の成果物はココ↓
https://github.com/aaaa1597/react-r3f-tutorial005

前提

App.tsx

まず全体。

App.tsx
import React, {useRef} from 'react';
import './App.css';
-import { Canvas, MeshProps, useFrame } from '@react-three/fiber'
+import { Canvas, MeshProps, useFrame, ThreeEvent } from '@react-three/fiber'
import { number } from 'prop-types';

const Box = (props: MeshProps) => {
  const ref = useRef<MeshProps>()

  useFrame(() => {
    if(!ref.current) return
    ref.current.rotation.x += 1 * 0.01
    ref.current.rotation.y += 0.5 * 0.01
  })

  return (
    <mesh {...props} ref={ref}
+     onPointerDown={(e: ThreeEvent<PointerEvent>) => console.log('pointer down ' + e)}
+     onPointerUp={(e: ThreeEvent<PointerEvent>) => console.log('pointer up ' + e)}
+     onPointerOver={(e: ThreeEvent<PointerEvent>) => console.log('pointer over ' + e)}
+     onPointerOut={(e: ThreeEvent<PointerEvent>) => console.log('pointer out ' + e)}
      >
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}

const App = () => {
  return (
    <div style={{ width: "75vw", height: "75vh" }}>
      <Canvas camera={{ position: [3, 1, 2] }}>
        <ambientLight />
        <directionalLight />
        <Box position={[-0.75, 0, 0]} name="A" />
        <Box position={[0.75, 0, 0]} name="B" />
      </Canvas>
    </div>
  );
}

export default App;
  • ポイントは、ThreeEventをimportするのと、
App.tsx
+import { Canvas, MeshProps, useFrame, ThreeEvent } from '@react-three/fiber'
  • meshの子要素に、onPointerDown(),onPointerUp(),onPointerOver(),onPointerOut()を追加してあげることだった。
App.tsx
<mesh {...props} ref={ref}
+     onPointerDown={(e: ThreeEvent<PointerEvent>) => console.log('pointer down ' + e)}
+     onPointerUp={(e: ThreeEvent<PointerEvent>) => console.log('pointer up ' + e)}
+     onPointerOver={(e: ThreeEvent<PointerEvent>) => console.log('pointer over ' + e)}
+     onPointerOut={(e: ThreeEvent<PointerEvent>) => console.log('pointer out ' + e)}
      >

わかれば簡単!!


出来た!!


React+TypeScriptなWebアプリで、R3Fのtutorial3.(useEffectとuseLayoutEffect)


React+TypeScriptなWebアプリで、R3Fのtutorial5.(useFrameの使い方)

Discussion