
2025/12/20 22:38
**Immersa:オープンソース・Webベースの3Dプレゼンテーションツール**
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
(欠落要素を補完し、推測を排除したバージョン) **
Immersa は ClojureScript、Reagent、Re‑frame、および Babylon.js で構築されたブラウザベースの 3D プレゼンテーションエディタです。ユーザーは
モデルをインポートし、JPG/PNG 画像を追加し、スタイル付き 3D テキストを作成できます。オブジェクトプロパティ(位置・回転・スケール)はスライド間で自動的に補間され、滑らかなアニメーション遷移が実現します。.glb
インターフェースは、左側のスライドサムネイルパネル、中央の 3D ビューポート、右側のオブジェクトプロパティパネル、および上部ツールバーで構成されています。プレゼンテーションモードには進捗バーがあり、フルビューポート編集、アニメーションサポート、ローカル IndexedDB ストレージ、Undo/Redo、そしてモダンダーク UI が備わっています。
開発には Node v16+、npm/yarn、および Java JDK 11+ が必要です。インストールは簡単で、をクローンし、https://github.com/ertugrulcetin/immersa.git(またはnpm install)を実行してからyarnで開発サーバーを起動します。プロダクションビルドはhttp://localhost:8280に出力されます。resources/public/js/compiled/
プレゼンテーションは後でインポートできるファイルとしてエクスポート可能です。このプロジェクトは MIT ライセンスで提供され、Babylon.js、Reagent、Re‑frame、Radix UI、および Phosphor Icons を使用しています。.edn
この改訂された概要はすべての主要ポイントを反映し、推測的表現を排除して明確かつ簡潔な概観を提示します。
本文
Immersa
Webベースの3Dプレゼンテーションツール ― スライド間でアニメーション付きの美しい3Dプレゼンテーションを作成
デモ
- 🎥 Immersa の実演を見る(デモ動画)
Immersa とは?
Immersa は、スライドを立体空間に展開する革新的なプレゼンテーションツールです。従来の2Dスライドベースのツールと異なり、以下の機能が利用できます。
- 3Dモデルの読み込み –
ファイルをインポート.glb - 画像の追加 – 2D画像を3D空間に配置
- テキスト作成 – 3Dテキスト要素の追加・スタイリング
- スライド遷移アニメーション – 移動・回転・拡大縮小時にオブジェクトを滑らかに補間
スライドアニメーションの仕組み
- スライド 1 を作成 – 3Dモデル、画像、テキストを配置
- スライドを複製 – 新しいスライドがすべてのオブジェクトをコピー
- オブジェクトを再配置 – 新しいスライドで位置・回転・サイズを変更
- プレゼンテーション実行 – Immersa が2つの状態間を補間し、滑らかなアニメーションを生成
例: 車モデルが左側(スライド 1)から右側(スライド 2)へ移動する際に、スムーズな遷移が行われます。
主な機能
- 3Dシーンエディタ:フルビューポートとカメラ操作
- GLB モデルサポート
- 画像サポート(JPG, PNG)
- 3Dテキスト作成・スタイリング
- アニメーション付き遷移
- プレゼンテーションモード:全画面+進捗バー
- ローカルストレージ(IndexedDB)でデータを保存
- Undo/Redo
- キーボードショートカット
- モダンダークテーマ UI
はじめに
必要環境
- Node.js (v16 以上)
- npm または yarn
- Java JDK 11+(ClojureScript コンパイル用)
インストール手順
git clone https://github.com/ertugrulcetin/immersa.git cd immersa npm install # もしくは yarn
開発サーバー起動
npm run dev # http://localhost:8280 で起動
本番ビルド
ビルド成果物は
resources/public/js/compiled/ に出力されます。
利用ガイド
エディタインターフェース
- 左パネル – スライドサムネイル(クリックで移動、ドラッグで順序変更)
- 中央 – 3Dビューポート
- 右パネル – オブジェクトプロパティ
- 上部バー – ツールとアクション
コンテンツ追加
- 3Dモデルを追加:
3D Model → Add 3D model (.glb) - 画像を追加:
Image → Add image - テキストを追加:
をクリック、または T キーText
オブジェクト操作
- 選択 – ビューポート内でクリック
- 移動 / 回転 / 拡大縮小 – ギズモまたは右パネル入力
スライド操作
| アクション | ショートカット |
|---|---|
| スライド追加 | D / + ボタン |
| 空白スライド | B |
| スライド削除 | サムネイルを右クリック → Delete |
| プレゼンテーションでの移動 | 矢印キー |
キーボードショートカット
| ショートカット | アクション |
|---|---|
| T | テキスト追加 |
| D | スライド複製 |
| B | 空白スライド追加 |
| Cmd/Ctrl + Z | 元に戻す |
| Cmd/Ctrl + Shift + Z | やり直し |
| Delete / Backspace | 選択オブジェクト削除 |
| Esc | プレゼンテーションモード終了 |
| 矢印キー | スライド移動(プレゼンテーションモード) |
プレゼンテーション
をクリックしてプレゼンテーションモードへPresent- 矢印キーまたは画面上のコントロールでスライドを切り替え
- Esc キーまたは
ボタンで終了Exit present mode
エクスポート
Export ボタンからプレゼンテーションを .edn ファイルとしてエクスポートできます。後で再読み込みして同じデータを復元可能です。
技術詳細
テクノロジースタック
- ClojureScript(主言語)
- shadow‑cljs(ビルドツール)
- Reagent(Reactラッパー)
- Re-frame(状態管理)
- Babylon.js(3Dレンダリング)
- IndexedDB(ローカルストレージ)
プロジェクト構成
immersa/ ├── src/immersa/ │ ├── common/ # ユーティリティ(IndexedDB, Firebase) │ ├── scene/ # 3Dシーン&アニメーションロジック │ ├── ui/ # エディタとプレゼンテーションUI │ └── presentations/ # デフォルトのプレゼンテーション ├── resources/public/ # 静的アセット └── shadow-cljs.edn # ビルド設定
データ保存
すべてのデータはブラウザの IndexedDB に格納されます:
- プレゼンテーション(スライドデータと構造)
- サムネイル(プレビュー画像)
- アップロードファイル(画像、3Dモデル)
セッションを跨いで永続化されます。リセットしたい場合はブラウザのデータをクリアしてください。
ライセンス
MIT –
LICENSE ファイルをご覧ください。
謝辞
- Babylon.js – 3Dレンダリングエンジン
- Reagent – ClojureScript 用 React インターフェース
- Re‑frame – SPA パターン(ClojureScript)
- Radix UI – アクセシブルコンポーネント
- Phosphor Icons – アイコンセット
❤️ を込めて、Ertuğrul Çetin が作成しました。