コードで描く、三次元。

光の玉が無数の立方体に砕け、さまざまな形に並び替わって最後に「3D」の文字になる立体映像です。

制作のポイント

暗闇に浮かぶ光の球体が512個の立方体に砕け、螺旋・格子・波・結び目・渦へと隊形を変えながら、最後に立体の「3D」へ組み上がる抽象3Dモーショングラフィック。Three.js の InstancedMesh と金属・ガラスのマテリアル、ブルームを使い、全フレームをタイムラインの時刻だけから計算してシーク可能にした。隊形の切り替えは BGM の小節頭と強拍に合わせている。

• Three.js（WebGL）を時刻から決定的に描画
• InstancedMesh で512個の立方体を制御
• 隊形モーフ（螺旋・格子・波・トーラスノット・渦・ボクセル文字）
• シード付き乱数と時差（スタッガー）
• 金属・ガラス（透過）マテリアルと縁の発光シェーダー
• ブルーム・フォグ・リムライト
• カメラの一周オービット
• BGMの拍に合わせた切り替え
• HTMLの日本語タイトルを重ねる

長さ

0:30

画面

横長 1920×1080

音楽

Suno

効果音

ElevenLabs

映像の組み立て

HyperFrames、Three.js、GSAP