🦔
React+TypeScriptなWebアプリで、R3Fのtutorial4.(マウスイベントの使い方)
Abstract
今回の参考はここ。
Eventsをどう実装するかの話。
そんなに難くない。
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- このスケルトンコードから始める。React +TypescriptのWebアプリで、React Three Fiberのtutorialその5
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)
Discussion