GLBビューワーつくーる（Vite + React + TS）

はじめに

GLB形式の3Dモデルを表示するアプリを作りました

開発環境

• MacBook Air M1, 2020
• Cursor 2.1.50
• nvm 0.39.7
• Node.js 22.4.0

フォルダ構成

frontend: Vite + React + TypeScript のフロントエンド

my-glb-viewer/
├── README.md                 # プロジェクトの説明
└── frontend/                 # フロントエンドアプリケーション
    ├── public/              # 静的ファイル
    │   └── vite.svg
    ├── src/                 # ソースコード
    │   ├── assets/          # アセットファイル
    │   │   └── react.svg
    │   ├── components/      # Reactコンポーネント
    │   │   ├── GLBViewer.tsx    # GLBビューワーコンポーネント
    │   │   └── GLBViewer.css    # GLBビューワーのスタイル
    │   ├── App.tsx          # メインアプリケーションコンポーネント
    │   ├── App.css          # アプリケーションのスタイル
    │   ├── index.css        # グローバルスタイル
    │   └── main.tsx         # エントリーポイント
    ├── index.html           # HTMLテンプレート
    ├── package.json         # 依存関係とスクリプト
    ├── tsconfig.json        # TypeScript設定
    ├── tsconfig.app.json    # アプリ用TypeScript設定
    ├── tsconfig.node.json   # Node用TypeScript設定
    ├── vite.config.ts       # Vite設定
    └── eslint.config.js     # ESLint設定

導入

💬 frontendフォルダに vite, react, ts アプリをセットアップして

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

> npx
> create-vite . --template react-ts

│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  No
│
◇  Scaffolding project in /frontend...
│
└  Done. Now run:

  npm install
  npm run dev

フロントエンドの起動

npm install
npm run dev

localhost:5173にアクセス

💬 frontendにglbビューワーを実装して

• GLBビューワーに必要な依存関係を追加（three, @react-three/fiber, @react-three/drei）
• GLBビューワーコンポーネントを作成
• App.tsxを更新してGLBビューワーを統合
• スタイリングを追加

💬 下記のエラー文を貼り付け

% npm install
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: frontend@0.0.0
npm error Found: react@19.2.1
npm error node_modules/react
npm error   react@"^19.2.0" from the root project
npm error   peer react@"*" from expo@54.0.27
npm error   node_modules/expo
npm error     peerOptional expo@">=43.0" from @react-three/fiber@8.18.0
npm error     node_modules/@react-three/fiber
npm error       @react-three/fiber@"^8.17.10" from the root project
npm error       1 more (@react-three/drei)
npm error     peer expo@"*" from @expo/dom-webview@0.2.8
npm error     node_modules/@expo/dom-webview
npm error       peerOptional @expo/dom-webview@"*" from expo@54.0.27
npm error     4 more (@expo/metro-runtime, expo-asset, expo-file-system, expo-gl)
npm error   10 more (@expo/dom-webview, react-native, @expo/metro-runtime, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@">=18 <19" from @react-three/fiber@8.18.0
npm error node_modules/@react-three/fiber
npm error   @react-three/fiber@"^8.17.10" from the root project
npm error   peer @react-three/fiber@"^8" from @react-three/drei@9.122.0
npm error   node_modules/@react-three/drei
npm error     @react-three/drei@"^9.114.3" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/xxxx/.npm/_logs/2025-12-09T12_15_24_334Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/xxxx/.npm/_logs/2025-12-09T12_15_24_334Z-debug-0.log

React 18にダウングレード

実行

実行してみましょう

cd frontend
npm install
npm run dev

glbビューワー作った pic.twitter.com/HD55CzGsNr

— がちもとさん (@sotongshi) December 9, 2025

お疲れ様でした

リポジトリはこちら