Zenn
🚀

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

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

Abstract

今回の参考はここ。
propsのチュートリアルを動かしてみた。
props説明はこっちが分かりやすい。

結論

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

前提

手順

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

めんどいから、前回のプロジェクトから始める。React+TypeScriptなWebアプリで、react-three-fiberのtutorialその1
で、下記コマンドでフォルダ名とか整備する。

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

App.tsx

まず全体。

App.tsx
import React from 'react';
import './App.css';
import { Canvas } from '@react-three/fiber'

+type Props = {
+ position?: number[];
+ name?: string;
+}

+const Box = (props: Props) => {
+ return (
+   <mesh {...props}>
+     <boxGeometry />
+     <meshBasicMaterial color={0x00ff00} wireframe />
+   </mesh>
+ )
+}

-function App() {
+const App = () => {
  return (
    <div style={{ width: "75vw", height: "75vh" }}>
-     <Canvas>
+     <Canvas camera={{ position: [3, 1, 2] }}>
        <ambientLight />
        <directionalLight />
-       <mesh>
-         <boxGeometry args={[4, 4, 4]}/>
-         <meshBasicMaterial color={0x00ff00} wireframe />
-       </mesh>
+       <Box position={[-0.75, 0, 0]} name="A" />
+       <Box position={[0.75, 0, 0]} name="B" />
      </Canvas>
    </div>
  );
}

export default App;

propsに関するところを抜き出す。

propsの型を定義する。
propsって予約語かなんかかと思ったら、そんなことなく、普通に定義が必要みたい。

App.tsx
type Props = {
 position?: number[];
 name?: string;
}

propsの受け側。引数として定義する。ま、普通だね。

App.tsx
const Box = (props: Props) => {

propsの渡し側1。
"...props"、ドットのついたやつって引数に渡してたんだね。そのまま渡せるんだ。
<MyComponent {...info} />
// ↑の書き方は↓と同義なんだって。
<MyComponent name={info.name} age={info.age} gender={info.gender} />

App.tsx
    <mesh {...props}>
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>

propsの渡し側。

App.tsx
    <Box position={[-0.75, 0, 0]} name="A" />
    <Box position={[0.75, 0, 0]} name="B" />

なるほど～。


出来た!!

React+TypeScriptなWebアプリで、R3Fのtutorial1.(コンポーネント化)

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

Discussion