💡

【React Three Fiber】Reactで作る３D【#１Getting Started】

2023/03/22に公開

React

React Three Fiber

three

tech

【#１Getting Started】

YouTube: https://youtu.be/mMWaPAmGiLw

https://youtu.be/mMWaPAmGiLw

今回から「ThreeJs」を「React」で便利に扱うためのライブラリ
「React-Three-Fiber」について解説します。

今回は初期設定と必要なライブラリをインストールしていきます。

まず最初にViteでReactのセットアップを行います。

https://ja.vitejs.dev/guide/

npm create vite@latest . -- --template react-ts

上記が完了しましたら、

npm install

でnode_modulesのインストールを行います。

次にスタイルにつきましては「tailwindcss」を使用します。

npm install -D tailwindcss postcss autoprefixer

ライブラリがインストール出来ましたら、

npx tailwindcss init -p

こちらのコマンドで「tailwind.config.cjs」を作成します。

コンフィグの内容は以下になります。

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

そして、「src」->「index.css」の中身を以下の内容に変更します。

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

ここまでできましたら、「React-Three-Fiber」のライブラリをインストールします。

npm install three @types/three @react-three/fiber

  "dependencies": {
    "@react-three/fiber": "^8.12.0",
    "@types/three": "^0.149.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.150.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }

【#１Getting Started】

Discussion