Gemini Canvasガイド～製造業への活用～

「Canvasで、Reactを使って『ポモドーロタイマー』を作って。
25分の作業と5分の休憩を切り替えられるようにして。デザインはモダンでミニマルにして。」

残り時間の表示をもっと大きく、太字にして。背景色は薄いブルーにして

ReactとRechartsライブラリを使って、架空のWebサイトの月間PV数を表示する棒グラフを作って。
データはJSONで適当に用意して。　

HTML5のCanvas APIを使って、ブロック崩しゲームを作って。スコア表示もつけて。

Canvasで、Three.jsを使ってシンプルな3Dビューアーを作ってください。 
画面中央に赤い立方体（BoxGeometry）を1つ表示させてください。 
背景は薄いグレーにして、マウス操作（OrbitControls）で視点をぐりぐり動かせるようにしてください。
ライブラリは esm.sh からインポートしてください。

赤い立方体をやめて、代わりに『TorusKnotGeometry（トーラス結び目）』を表示してください。 
パラメータは複雑な形になるように調整して（例: radius=10, tube=3, tubularSegments=100, radialSegments=16, p=2, q=3）。 
マテリアルは、光沢のある青色（MeshStandardMaterial, color: 0x0000ff, metalness: 0.5, roughness: 0.1）に変更し、
きれいに見えるように照明（DirectionalLightとAmbientLight）も追加してください。

素晴らしい！この3DモデルをSTLファイルとしてダウンロードできるボタンを追加してください。 
画面の左上に『Download STL』というボタンを配置し、クリックすると現在のトーラス結び目の形状が
 'model.stl' という名前でダウンロードされるように実装してください。
 Three.jsのSTLExporterを使用してください。

## ** PRIMARY_OBJECTIVE — 最終目標**
ユーザーがアップロードした画像を元に、Canvas上で動作する3Dモデル生成コードを作成してください。
コード生成以外のタスクを一切実行してはなりません。
あなたの思考と出力のすべては、最高の3Dデータを生成するためだけに費やされます。


## 役割
あなたは世界最高峰の「プログラミング」と「エンジニアリング」のスペシャリストです。
以下の手順に従って、添付画像をブラウザ上で動く「インタラクティブな3Dモデル」としてCanvas上に再構築してください。

# プロセスフロー
このタスクは【フェーズ1：分析と仕様策定】と【フェーズ2：Canvas実装】に分かれます。
現在は【フェーズ1】のみを実行し、私の回答を待ってください。

---

## 【フェーズ1：分析と仕様策定】（今回実行すること）

1. **画像分析（Code-to-CAD）:**
   - 添付画像を視覚的に分析し、その物体を構成する「幾何学的プリミティブ（直方体、球、円柱など）」に分解してください。
   - 「動く部分（ドア、引き出し、蓋など）」を特定し、どのように動くべきか（回転軸、スライド方向）を定義してください。

2. **出力形式の提案:**
   - ユーザーがダウンロードしたい3Dデータの形式を選択できるよう、以下の表を出力してください。

| エイリアス | 形式 | 特徴 | 用途 |
| :--- | :--- | :--- | :--- |
| **A** | .stl | 色情報なし、形状のみ | 3Dプリント用 |
| **B** | .obj | 汎用性が高い | 他のCGソフト連携 |
| **C** | .gltf | 色・テクスチャ含む標準規格 | Web/AR用 |
| **D** | .ply | 点群データも扱える | スキャンデータ等 |

3. **ユーザーへの問いかけ:**
   - 分析結果（構成要素と動く部分）を簡潔に伝えた上で、「どの形式で出力しますか？エイリアス（A/B/C/D）で教えてください」と質問して一時停止してください。
   - ユーザーへの出力は出力形式の表と、簡潔な質問文のみとしてください。
---

## 【フェーズ2：Canvas実装】（ユーザーが形式を選んだ後に実行）

ユーザーが形式を指定した後、Canvasで以下の要件を満たすコードを作成してください。

### 技術スタック
- 条件に応じて最適な物を自動で選択してください

### 実装要件
1. **3D再構築:**
   - 分析に基づき、物体を再現する。
   - 色や質感（Material）も画像に寄せること。
2. **インタラクション（重要）:**
   - 視点を自由に動かせるようにする。
   - **可動部:** ドアや引き出しなどは、クリックすると開閉するアニメーションを実装する。
3. **ダウンロード機能:**
   - 画面内に目立つ「Download 3D Model」ボタンを配置する。
   - ユーザーが選択した形式（STL/OBJ/GLTF/PLY）に対応するExporterを使用して保存させる。
4. **UIデザイン:**
   - 全画面表示ではなく、左側に操作パネルや説明、右側に3Dビューアーが見えるモダンなレイアウトにする。

---

**それでは、まずは添付画像の分析を行い、出力形式の選択肢を表で提示してください。**

Create a real-time interactive 3D particle system with Three.js.

requirements:
1. Control the scaling and expansion of the particle group by detecting the tension and closing of both hands through the camera.
2. Provide panels that can choose hearts/flowers/saturn/Buddha statues/fireworks and other templates
3. Support the colour selector to adjust the particle colour
4. Particles need to respond to gesture changes in real time. The interface is simple and modern.
5. The interface is simple and modern

Build a Fully-Interactive 3D Office Campus Web App

Goal:

Create a polished, futuristic, bright-looking Three.js interactive office building simulator, with a Tailwind CSS dashboard and multiple data-driven modes.

⸻

Technology & UI

	•	Use Three.js for the 3D scene.

	•	Use Tailwind CSS for the UI dashboard (float on the left, compact and dense).

	•	Right side = fullscreen 3D; left = tabs + sliders + toggles.

	•	Visual style: bright, modern, slightly “sci-fi” with bloom/tonemapping.

	•	The environment and main building should appear clearly lit, not dark.

⸻

3D Scene Setup

	•	Procedurally generate a modern office building with interior rooms, partitions, and different functional zones.

	•	Add simple surrounding buildings + roads (low-poly is fine).

	•	Add a lobby on the first floor with:

	•	a reception bar

	•	a central core (elevators + stairs) spanning all floors

	•	Underground parking garage directly beneath the building.

Interior Details

	•	Floor partitions to separate office/meeting/pantry/core/etc.

	•	Office furniture (gray models; white blends too much):

	•	desks, chairs

	•	meeting tables + TV

	•	pantry with water bar

	•	People = red-tinted 3D human proxies

	•	No people in parking

	•	Ensure character feet sit exactly on the floor (no floating).

⸻

Dashboard Controls (Tailwind)

Three Tabs

	1.	People

	2.	Environment

	3.	Energy

24-Hour Time Slider

Controls:

	•	Sun position

	•	Window emissive intensity (night mode)

	•	People distribution per time period

	•	Shows external environmental metrics (simulated is ok):

	•	temperature

	•	humidity

	•	wind speed

	•	solar radiation

View Modes

	1.	Default: PBR realistic materials

	2.	Heatmap: comfort shown as colored volumetric blocks

	3.	People view: highlights human density + zones

⸻

Behavior Logic

People Simulation

	•	Distribution changes visibly with time:

	•	Work hours → more in offices + meeting rooms

	•	Lunch → more in pantry / rest areas

	•	Not just numbers — 3D positions change dynamically

Energy Mode

Show breakdown by:

	•	cooling

	•	heating

	•	lighting

	•	equipment

	•	hot water

Parking energy includes only lighting + equipment.

⸻

Interactive Features

1. Floor “Drawer” Extraction

	•	Clicking a floor pulls it out like a drawer

	•	Extraction direction:

	•	along the short side

	•	rotated 90° clockwise

	•	Extracted floor = opaque, not transparent

	•	Extracted floor = highlighted; other floors dim

2. Room-Level Interaction

	•	Clicking a room should:

	•	highlight only that room

	•	remove previous ugly yellow wireframe

	•	no highlight when nothing is selected

	•	Add toggle buttons to show functional zones using color blocks.

3. Parking Visibility Toggle

	•	Hide the ground plane when viewing the parking garage

	•	Parking features:

	•	painted parking lines

	•	cars placed without overlap

⸻

Environment & Heat-Comfort

	•	Use colored volumetric blocks for comfort visualization

	•	No Z-fighting with floors or ground

	•	Fix overflow bug (Level 1 comfort cube extruding outside the building)

⸻

Visual & Functional Improvements

	•	Scene must be brighter

	•	Remove neighbor building that obstructs floor extraction

	•	People models more red for clarity

	•	No transparency for extracted objects

	•	Furniture uses gray only

	•	Roof splitting bugs fixed

	•	Heat-comfort mode limited properly inside geometry

⸻

Acceptance Checklist

Gemini should generate code that satisfies:

✔ Sun + time slider updates lighting + emissive windows

✔ People distribution changes visibly by time

✔ Heatmap uses volumetric blocks

✔ Floor extraction is correct (short side, 90° CW, opaque)

✔ Room highlights on click only

✔ Parking visible only after hiding ground

✔ Cars do not overlap

✔ Red people models grounded correctly

✔ Energy breakdown fully functional

✔ Bright scene with “cool” futuristic visual style