---
title: OBJ Drive Viewer
emoji: 🧠
colorFrom: blue
colorTo: gray
sdk: docker
app_port: 7860
pinned: false
---

# OBJ Drive Viewer

Google Drive の固定フォルダから `.obj` ファイルを一覧表示し、選択したOBJを Three.js でブラウザ描画する最小実装です。

デフォルトのDriveフォルダID:

```txt
1xK0ZNYBpVeYBKca48xxKEFpGWy9bbRaw
```

## セットアップ

1. Google Cloud Console で OAuth 2.0 Client ID を作成します。
   - Application type: Web application
   - Authorized JavaScript origins:
     - `http://localhost:5173`
   - OAuth consent screen は社内向けの設定にしてください。
2. Google Drive API を有効化します。
3. `.env.example` を `.env` にコピーし、`VITE_GOOGLE_CLIENT_ID` を設定します。

```bash
cp .env.example .env
```

4. 依存関係をインストールして起動します。

```bash
npm install
npm run dev
```

## 実装内容

- Google Identity Services によるID token取得
- Drive API の読み取り専用スコープ
- Express APIでGoogle ID tokenを検証
- `baby-helmet.com` Workspaceユーザーだけ許可
- 固定フォルダID配下の `.obj` ファイル一覧取得
- 選択したOBJファイルの `alt=media` ダウンロード
- Three.js `OBJLoader` による表示
- OrbitControls による回転・ズーム操作

## 主な設定

`.env`:

```env
VITE_GOOGLE_CLIENT_ID=your-google-oauth-client-id.apps.googleusercontent.com
VITE_DRIVE_FOLDER_ID=1xK0ZNYBpVeYBKca48xxKEFpGWy9bbRaw
GOOGLE_CLIENT_ID=your-google-oauth-client-id.apps.googleusercontent.com
DRIVE_FOLDER_ID=1xK0ZNYBpVeYBKca48xxKEFpGWy9bbRaw
```

`VITE_DRIVE_FOLDER_ID` は未指定でも上記の固定フォルダIDを使います。