README.md

metadata

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:

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 を設定します。

cp .env.example .env

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

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:

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を使います。