Zenn
😎

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

2023/12/23に公開
React
TypeScript
Three.js
r3f
tech

Abstract

今回の参考はここ(useState)。

結論

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

前提

手順

1.プロジェクト生成 -> VSCodeで開く

めんどいから、このスケルトンコードから始める。react-r3f-tutorial002
で、下記コマンドでフォルダ名とか整備する。

フォルダリネームとか
$ NewProject=react-r3f-tutorial002
$ cd ~
$ rm -rf ${NewProject}
$ git clone https://github.com/aaaa1597/${NewProject}.git
$ rm -rf ${NewProject}/.git
$ cd ${NewProject}

準備

$ npm install --save three
$ npm install --save @types/three
$ npm install --save @react-three/fiber

App.tsx

まず全体。

App.tsx
-import React from 'react';
+import React, { useRef, useState } from 'react';
import './App.css';
-import { Canvas, MeshProps } from '@react-three/fiber'
+import { Canvas, MeshProps, useFrame  } from '@react-three/fiber'
+import * as THREE from 'three'

const Box = (props: MeshProps) => {
+ const ref = useRef<THREE.Mesh>(null!)
+ const [hovered, setHover] = useState(false)
+ const [rotate, setRotate] = useState(false)

+ useFrame((_, delta) => {
+   if (rotate) {
+     ref.current.rotation.x += 1 * delta
+     ref.current.rotation.y += 0.5 * delta
+   }
+ })

const ref = useRef<THREE.Mesh>(null!)
  const [hovered, setHover] = useState(false)
  const [rotate, setRotate] = useState(false)

  useFrame((_, delta) => {
    if (rotate) {
      ref.current.rotation.x += 1 * delta
      ref.current.rotation.y += 0.5 * delta
    }
  })

  return (
-   <mesh {...props}>
+   <mesh {...props} ref={ref}
      scale={hovered ? [1.1, 1.1, 1.1] : [1, 1, 1]}
      onPointerDown={() => setRotate(!rotate)}
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}
    >
      <boxGeometry />
-     <meshBasicMaterial color={0x00ff00} wireframe />
+     <meshBasicMaterial color={hovered ? 0xff0000 : 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;


出来た!!

ポイント

特にないかも。素直に実装できる。

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

React+TypeScriptなWebアプリで、R3Fのtutorial7.(統計情報の表示)

Discussion