🙌
React+TypeScriptなWebアプリで、R3Fのtutorial10。(gridHelper、axesHelper)
Abstract
今回の参考はここ(axesHelper)と、ここ(gridHelper)。
結論
今回の成果物はココ↓
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- このスケルトンコードから始める。react-r3f-tutorial009
手順
1.プロジェクト生成 -> VSCodeで開く
めんどいから、このスケルトンコードから始める。react-r3f-tutorial009
で、下記コマンドでフォルダ名とか整備する。
フォルダリネームとか
$ BaseProject=react-r3f-tutorial009
$ NewProject=react-r3f-tutorial010
$ cd ~
$ rm -rf ${BaseProject}
$ git clone https://github.com/aaaa1597/${BaseProject}.git
$ rm -rf ${BaseProject}/.git
$ mv ${BaseProject} ${NewProject}
$ cd ${NewProject}
準備
$ npm install --save three
$ npm install --save @types/three
$ npm install --save @react-three/fiber
$ npm install --save @react-three/drei
.eslintrc.js
es-lintがエラーを吐くので、除外設定しとく。
.eslintrc.js
- "react/no-unknown-property": ['error', { ignore: ['css', "args", 'wireframe'] }],
+ "react/no-unknown-property": ['error', { ignore: ['css', "args", 'wireframe', 'rotation-x', 'rotation'] }],
App.tsx
まず全体。
App.tsx
import React, {useRef} from 'react';
import './App.css';
import { Canvas, useFrame, MeshProps } from '@react-three/fiber'
import * as THREE from 'three'
import { OrbitControls } from '@react-three/drei'
const Box = (props: MeshProps) => {
const ref = useRef<THREE.Mesh>(null!)
useFrame((_, delta) => {
if( !ref.current) return
ref.current.rotation.x += 1 * delta
ref.current.rotation.y += 0.5 * delta
})
return (
<mesh {...props} ref={ref}>
<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" />
<OrbitControls />
+ <axesHelper args={[5]} />
+ <gridHelper rotation={[Math.PI / 4, 0, 0]} />
</Canvas>
</div>
);
}
export default App;
で、実行!!
簡単~!!
まとめ
<axesHelper/>
サポート用のxyz3軸を表示する。引数はサイズ。default=1。
<gridHelper/>
サポート用のグリッド線を表示する。引数はいろいろ。調べてね。
やったね。簡単、便利!!
React+TypeScriptなWebアプリで、R3Fのtutorial9。(OrbitControls)
React+TypeScriptなWebアプリで、R3Fのtutorial11。(パラメータを設定できるやつ。Leva)
Discussion