React+TypeScriptなWebアプリで、"React Three Fiber"の3D表示の2歩目。

2023/12/17に公開

Abstract

こっちの記事で、いちおう3Dの立方体表示できたけど、React Three Fiberのgetting-startedのところまでは完遂したい。

結論

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

前提

手順

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

めんどいから、プロジェクト雛形を前回のプロジェクトにする。React+TypeScriptなWebアプリで、"React Three Fiber"の3D表示の最初の一歩。
で、下記コマンドでフォルダ名とか整備する。

フォルダリネームとか
$ ProjectName=react-r3f-2ndstep
$ cd ~
$ git clone https://github.com/aaaa1597/react-r3f-1ststep.git
$ rm -rf react-r3f-1ststep/.git
$ rm -rf ${ProjectName}
$ mv react-r3f-1ststep ${ProjectName}

2.生成したプロジェクトの場所でthree.jsとかR3Fとかインストール

$ cd プロジェクトのフォルダ
$ npm install
$ 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 * as THREE from 'three'
-import { Canvas } from '@react-three/fiber'
+import { Canvas, useFrame, ThreeElements  } from '@react-three/fiber'

+const Box = (props: ThreeElements['mesh']) => {
+  const meshRef = useRef<THREE.Mesh>(null!)
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
+  return (
+    <mesh
+      {...props}
+      ref={meshRef}
+      scale={active ? 1.5 : 1}
+      onClick={(e) => setActive(!active) }
+      onPointerOver={(e) => setHover(true)}
+      onPointerOut={(e) => setHover(false)}>
+        <boxGeometry args={[1, 1, 1]} />
+        < meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}

-function App() {
+const App = () => {
  return (
    <div id="canvas-container">
      <Canvas>
        <ambientLight />
-       <directionalLight />
+       <pointLight position={[10, 10, 10]} />
-       <mesh>
-         <boxGeometry />
-         <meshStandardMaterial />
-       </mesh>
+       <Box position={[-1.2, 0, 0]} />
+       <Box position={[1.2, 0, 0]} />
      </Canvas>
     </div>
  );
}

export default App;

これだけだとエラーになるので、.eslintrc.jsのルールに'position'追記。

.eslintrc.js
   "rules": {
-      "react/no-unknown-property": ['error', { ignore: ['css', "args"] }],
+      "react/no-unknown-property": ['error', { ignore: ['css', "args", 'position'] }],
   }


出来た!!
ポイントは、.eslintrc.jsのルールに追記するところやった。
ここさえ分かれば、簡単。

参考:
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

Discussion