A React Three Fiber component for augmented reality using MindAR.js and TypeScript.
npm install react-three-mindtsmindar の imagetracking を気軽に ts で書くことができるコンポーネントライブラリになります。
基本的に react-three-fiber の記法と同じで、ARCanvas の中にオブジェクトの情報を記述することで AR 上にオブジェクトを設置することができます。
また imagetracking を行う画像を設定するには、mind-ar 公式サイトのimage-targets-compilerを使用してください。
そちらで生成された.mind ファイルを public 配下に設定し、パスを ARCanvas の markerUrl 属性に設定することで利用できます。
``tsx
import { ARCanvas } from "react-three-mindts";
import "./App.css";
function App() {
return (
<>
);
}
export default App;
``