✨
React+TypeScriptなWebアプリで、"React Three Fiber"の3D表示の2歩目。
Abstract
こっちの記事で、いちおう3Dの立方体表示できたけど、React Three Fiberのgetting-startedのところまでは完遂したい。
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- 前回のプロジェクトから始める。React+TypeScriptなWebアプリで、"React Three Fiber"の3D表示の最初の一歩。
手順
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のルールに追記するところやった。
ここさえ分かれば、簡単。
参考:
Discussion