OriCube（オリキューブ）

各種リンク

• サイトURL：https://oricube.vercel.app/
• デモ動画URL：https://www.youtube.com/watch?v=-ON8P8Axjng

製品概要

折り紙 X Tech : 折り紙の手順を誰にでもわかりやすく伝えるための Web アプリ

背景(製品開発のきっかけ、課題等）

開発の背景

折り紙は小さな子供の遊び道具として親しまれています。しかし、未就学児などの小さな子どもにとっては、折り図を見ても理解が難しく、折れないことがあります。その理由として、以下が挙げられます。

• 山折り線や谷折り線の記号だけでは動作が理解しにくい
• 折る前と折った後の形しか示されておらず、途中の折り方がわからない
• 文章説明が複雑で難解

そこで、本製品は、「一人で折り紙を折りたい小さな子ども」　を対象に、

• 「折る途中の状態がわからず、紙面の説明書だけでは折り方がわからない」

• 「定点撮影の動画では自分の気になる部分を詳しく見られない」

といった課題を解決します。

そして、子どもが自分が作りたい折り紙を自力で折れるようになるための手段となることを目指しています。

既存サービスの検討

動画での折り方説明

折り紙動画の例

動画での折り方説明には以下の利点が挙げられます。

• 実際に折り紙を折る様子を通して、途中の折り方が視覚的に理解できる
• 動画により、文章説明よりも直感的に折り方を把握しやすい

しかし、多くの場合画角が一定であるため見たい部分が見づらく、人によって折る速さや説明の焦点が異なるため、自分の理解したいところを重点的に見るのが難しい点が課題です。

OrigamiSimulator

OrigamiSimulatorは、折り目パターンをシミュレーションするアプリケーションで、ユーザーは 3D の折り紙モデルを自由に回転・拡大できます。しかし、全ての折り目が同時に折られるため、連続した手順としての折り方のサポートには適していません。

製品説明（具体的な製品の説明）

OriCube は様々な折り紙の折り方を立体的に閲覧できるサービスです。

特長

1.途中経過を見ることができる

ユーザーは折り方を再生し、折る前から折った後までの手順を連続して確認できます。

2. 全方向から立体的に折り方を見ることができる

折り紙の 3D モデルが表示され、自由に回転や拡大縮小を行い、見たい角度から折り紙を確認できます。

解決出来ること

• 折り図では分からなかった途中経過が直観的に理解できる
• 自分が見たい手順を確実に見逃さずに確認できる
• 自分が見たい角度から折り方を観察できる

今後の展望

OriCube で、折り紙の折り方を誰でも簡単に理解することができるようになりました。しかし、折り紙の種類が現状少なく、ユーザーが折りたい折り紙の折り方を閲覧できない可能性があります。

この課題を解決するため、ユーザーによる折り方の投稿機能を作成する予定です。現在は開発者が手動でデータを定義していますが、人数が限られている上に時間がかかります。そのため、誰でも簡単に折り紙の折り方を追加できる機能を作成し、折り紙の種類を増やしていきたいと考えています。

また、折り紙の種類が増加した場合にはカテゴリ機能を実装し、ユーザーが折りたい折り紙に出会いやすくすることができるようにする予定です。

注力したこと（こだわり等）

1. Three.js による 3D モデルの実装

Three.js を用いて、誰でもアクセス可能な Web 上で、折り紙の 3D モデルを実装しました。3D モデルがスムーズに動作するように最適化し、ユーザーが快適に折り方を確認できる環境を提供しています。

2. 手順確認の UI

ユーザーが 3D モデルを見ながら折り紙を折れるように、少ない操作で直感的に利用できる UI を作成しました。具体的には、折り方を再生する機能や、ページネーションによる手順のスムーズな切り替えをサポートしています。

開発技術

活用した技術

フレームワーク・ライブラリ・モジュール

• Next.js
  • React ベースのフロントエンドフレームワーク
  • 本 web アプリの画面構築のために使用
  • スタイリングには Sass, RadixUI を使用
• Three.js
  • web で 3D コンテンツを描画するための JavaScript ライブラリ
  • 折り紙の 3D モデルを表示するために使用

デバイス

• Web アプリで、スマートフォン、タブレット、PC に対応

独自技術

ハッカソンで開発した独自機能・技術

3D モデルで板を折る機能

Three.js の Plane(板)を用いて、折り紙を表示していますが、Three.js には Plane を折る機能は標準で提供されていません。これにより、通常の機能のみでは折る操作を表現できないという課題がありました。

そこで、以下の方法で折る操作を擬似的に実装しました。

• Plane を折り目で 2 枚に分ける
• 2 枚のうち 1 枚の Plane を折り目を中心に回転させる

詳しくは該当ファイルをご覧ください。

3D モデルの物体の回転の機能

折り紙を折る時の操作として開いて折る操作が必要です。これは単純な回転とは異なり、複数の板がそれぞれ別の軸で回転・移動する動きです。Three.js では rotation や quaternion による物体の回転機能が提供されていますが、この操作を表現するには難しいという課題がありました。

そこで、今回は Three.js で提供されている回転の機能を用いず、回転の角度が更新されるごとに板をレンダリングする方式を採用しました。レンダリング回数の増加によりパフォーマンス低下の懸念はありますが、Three.js の描画に関わる State 管理を最小限に抑え、useRef を使ってカメラやシーンの値を保持し、スムーズな動作になるよう工夫しています。

詳しくは該当ファイルをご覧ください。

折り紙を折る手順の構造化

折り紙の折り手順をデータとして定義し描画するための規格は存在しないため、新たに規格を定義しました。将来的にユーザーによる手順の入力に対応できるよう、最低限の情報を保持するように工夫しました。

具体的には、以下の情報が含まれています。

• 描画する板の座標
• 回転軸
• 折り方の種類
• 折り方の説明

詳しくは該当ファイルをご覧ください。