RainDrop - Interactive Web Novel (Three.js Based)

🎬 概要

RainDrop（雨粒が） は、インタラクティブで分岐可能な縦書きWebノベル。 少年視点と水滴視点の2つの物語が交差し、選択によって流れが変化します。 UI要素を極力排除し、完全にシームレスな体験を目指します。

---

🧩 シナリオ仕様

● 基本構造

• 視点：

  • 少年視点
  • 水滴視点

• 分岐と合流：

  • 選択肢による分岐（位置は任意）
  • 最終的に1本に合流（単語単位で段階的に）
  • 合流後も自分がたどったルートに戻ることが可能

• ループ構造対応：

  • 一部のノードはループ可能（特定の選択でループから脱出）

• 演出案：

  • 最後に通過ノードを縮小表示しながら遡るアニメーション
  • テキストが脈打つような視覚効果
  • タイトル「雨粒が」に回帰し、そのまま再開可能

---

🗂️ シナリオデータ構造

• データは scenario.csv で管理し、parseCsv.js によって JSON に変換

● CSV構成例（予定）

カラム名	説明
id	一意なノードID
text	表示される縦書きテキスト
perspective	視点（例：少年 / 水滴）
choice1_id	選択肢1の遷移先ID（任意）
choice1_text	選択肢1の表示文
choice2_id	選択肢2の遷移先ID（任意）
choice2_text	選択肢2の表示文
merge_id	合流先ノードID（任意）
meta	表示タイミングや演出フラグ等

---

💻 実装構成

• 使用技術：Vite + Three.js
• フォルダ構成：src/ に集約

● 主な実装コンポーネント

• textNode：1ノードに対応するThree.js上の文字オブジェクト
• group：1つのノードをまとめるObject3D。レイアウトやアニメの単位
• ノード同士は ベジェ曲線 で接続し、選択肢や合流を可視化
• motion1(), motion2() などでノードやカメラのアニメ制御

● UIポリシー

• ✅ Perfect No UI（ナビゲーション・UI無し）
• ✅ Seamless（中断なく物語が流れる）
• ✅ Super Simple（極限までミニマルな構成）

---

🚧 今後の拡張・課題

• モバイル対応（スワイプ操作）
• PC向けにマウスホイールによるスクロール導入
• ノードに状態管理（訪問済み、分岐履歴）
• シナリオ可視化（リプレイ or チャートモード）
• 環境音／効果音の導入

---

📁 ディレクトリ構成（抜粋）

TBW.

---

🔖 ライセンス

MIT（予定）