概要
折り紙の折り方をWeb上で作成・投稿・閲覧できるWebアプリです。JPHACKS2024にて、審査員投票・聴衆投票の両部門で最優秀賞を受賞しました。
背景
折り図を見ても途中の形がイメージしにくかったり、動画での解説は視点が固定されていたり折っている手が邪魔になったりと、折り紙の折り方の説明にはまだ課題がありました。
こうした「折り方の説明の難しさ」という問題に向き合い、折り紙の手順を3Dアニメーションで自由な角度から確認できるWebアプリを開発しました。
特徴
- Web上で折り紙を折る: エディタ上で実際に折り紙を折る操作を行い、その手順をそのまま投稿できます。折り方データを別途用意する必要がなく、折りながら作れます
- 自由な視点操作: 投稿された折り方を3Dモデルで再生でき、好きな角度に回転させながら確認できます
- 自分のペースで学習: 動画と違い、好きなステップで止めたり戻したりして進められます
技術的なこだわり
Three.jsには「板を折る」操作が標準で存在しないため、折り目で面を2枚に分割してそれぞれを回転させる方式を独自実装しました。この仕組みはエディタでの作成時と閲覧時の両方で共通して動作します。また「開いて折る」のような複数軸にまたがる動きも、レンダリングを最適化することで実現しています。
折り手順のデータは座標・回転軸・折り方の種類などを構造化した独自のJSON形式で定義しており、エディタで折った操作をそのままデータとして保存・再生できる仕組みを設計しました。