Neta
ExploreWorksWorldsToolsGuides
ExploreToolsGuides
3Dスクロールサイトを作る
3Dスクロールサイト作成ツール

3Dスクロールサイト作成ツール — Three.js不要

場所を一行で書くだけ。スクロールで本物のカメラが中を進みます。場面は生成され、それぞれに飛び込み、繋ぎ目は見えない。Three.jsもGSAPも不要です。

璃月、提灯の路地 — Genshin Impact。降下の途中：提灯がレンズの脇を流れ、市場の奥行きは保たれたまま。フォンテーヌ、大階段 — アーケードの外から入っていく一続きの飛行。カットはありません。片桐高校、階段 — Horimiya。堀が先に出て、背後の廊下の奥行きはそのまま。渋谷、スクランブル — このページのために制作：一行から三つの場面、ひと続きの飛行。

Scroll World Video スキルで動いています。

✦3Dスクロールサイト
3Dスクロールサイトを作る：長い提灯が一本だけ灯る夜市
水上バスのターミナル — 最初の停留所。見出し・本文・タグが水面に重なる。カメラを動かすのはスクロールだけ。
水上バスのターミナル — 最初の停留所。見出し・本文・タグが水面に重なる。カメラを動かすのはスクロールだけ。
オペラ座の屋根 — 三つ目。扉、光、同じ飛行、カットはまだありません。
オペラ座の屋根 — 三つ目。扉、光、同じ飛行、カットはまだありません。
干潮の魚市場 — 香菱がカウンターに立つ。潮位と水揚げは飾りではなくデータ。
干潮の魚市場 — 香菱がカウンターに立つ。潮位と水揚げは飾りではなくデータ。
訓練場 — The Hollow Star。十二章のレールと、空中から競技場へ降りるカメラ。
訓練場 — The Hollow Star。十二章のレールと、空中から競技場へ降りるカメラ。
最後のチャイム — 堀と宮村が下駄箱に。見出しは左に固定。
最後のチャイム — 堀と宮村が下駄箱に。見出しは左に固定。
教室の上 — 最後の停留所。ふたりが手すりに並び、街が金色になる。
教室の上 — 最後の停留所。ふたりが手すりに並び、街が金色になる。
スクランブル — このページのために制作。地上から、群衆の上をカメラが降りてくる。
スクランブル — このページのために制作。地上から、群衆の上をカメラが降りてくる。
地下への階段 — 二枚目。地下鉄の入口、手すりが流れ、奥に改札。
地下への階段 — 二枚目。地下鉄の入口、手すりが流れ、奥に改札。
帳の上 — 最後の一枚。屋上、その人物、足元に交差点のすべて。
帳の上 — 最後の一枚。屋上、その人物、足元に交差点のすべて。
01 / 03

フォンテーヌ、夜

三つの停留所をひと続きで。水上バスのターミナル、アーケード、オペラ座の屋根。

フォンテーヌ、夜Open in new tab
Want your own?

一行から、カメラのようにスクロールするページへ。

Neta Studioが各場面を生成し、色調をひとつに揃え、場面のあいだをカメラが飛びます。公開されるページはその映像をスクラブするだけなので、スクロール位置がカメラの時間になります。文言はページのある場所でそのまま編集できます。

  • 偽の視差ではなく、本当の奥行き — 場面は静止画として生成され、モデルがカメラを中へ飛ばします。PNGの重ねやCSS変形でごまかしてはいません。
  • 見つからない継ぎ目 — 繋ぎ目は前のクリップの最終フレームに合わせるので、全体がワンテイクに読めます。
  • 公開後も編集できる — 見出し、本文、タグ、場面の順番はただの項目です。変えて再公開しても、カメラの動きはそのまま。

よくある質問

これは本当に3Dですか、動画ですか？

事前レンダリングです。各場面は生成された静止画、カメラの動きは生成されたクリップで、スクロール位置がそのクリップをスクラブします。奥行きも動きも本物で、場面あたり数MB。ただしモデルを回したり、道から外れたりはできません。

Three.jsやGSAP、デザイナーは必要ですか？

要りません。書くのは一行だけ。ライブラリもタイムラインもシーングラフも、撮影予算も不要です。

初回の読み込みはどれくらいですか？

三場面で約23〜25MB、ページが開く前に進捗バーで待ちます。場面を一つ増やすと約9MB増えます。

自分の写真やブランドを使えますか？

使えます。参照として渡せば各場面がそこから派生し、実在の場所は見た目と光を保ちます。まだない世界なら一行で足ります。

作った後に変えられるものは？

各場面の見出し、本文一行、最大三つのタグ、そして場面の順番。カメラの動きはレンダリング済みのままです。

スマートフォンでも動きますか？

開いてスクロールできます。軽いエンコードと中央クロップを使います。スクラブは本来デスクトップの操作で、遅い回線では初回読み込みが一番重く感じます。

スクロールアニメのテンプレートと何が違いますか？

テンプレートは既にある要素を動かします。ここでは場面も奥行きもカメラの通り道も生成されるので、存在しなかった場所を飛べます。

完成したサイトはどこに置かれますか？

作品として公開され、公開リンクが付きます。送る、埋め込む、フォークして場面を差し替える、どれも自由です。

一行で、ひと続きの飛行。

三つの場面、それを抜けていくカメラ、送れるリンク。

3Dスクロールサイトを作る
×