Three.jsによる製品発表映像
コミュニティのアイデア · @Chris製品資料をもとに、Three.jsで製品発表映像を制作してください。まず、根拠を示せる三つの強みを抽出して絵コンテを組み立て、デバイス、画面UI、文字、カメラの動きを使って製品を順に紹介してください。すべての映像を同じタイムライン上で構成し、音と編集のリズムを合わせ、最後に製品の訴求点を明確に伝えてください。
Claude Opus 5.5の選集は、出典付きのThree.js・Blenderアニメーションやデータ可視化を紹介します。参考プロンプトの被写体や動きを変え、創作の組み立て方を検討できます。
製品資料をもとに、Three.jsで製品発表映像を制作してください。まず、根拠を示せる三つの強みを抽出して絵コンテを組み立て、デバイス、画面UI、文字、カメラの動きを使って製品を順に紹介してください。すべての映像を同じタイムライン上で構成し、音と編集のリズムを合わせ、最後に製品の訴求点を明確に伝えてください。
BlenderとPythonで小さなコインランドリーを作ってください。空間、マテリアル、照明をコードで構築し、洗濯機のドラムの回転と室内の暖かな光の変化を加えてください。カメラを通して、静かで生活のぬくもりを感じる三次元シーンを描いてください。
Three.jsで、視点を回転させて眺められる雨の夜の街角のミニチュアシーンを制作してください。暖かな光がともるコンビニを中心に、ひさし、自動販売機、自転車を周囲に配置してください。雨粒、水面の波紋、ガラスの反射を使って、屋外の寒色と室内の暖色を対比させてください。
一つの図形が連続して変形するUIアニメーションをデザインしてください。ボタン、読み込み状態、音楽プレーヤー、スライダー、グラフを順に登場させ、控えめな白黒の配色とバネのような動きを使ってください。先に各状態とタイミングを設計してから、時間を指定して再生位置を移動できるアニメーションをコードで作り、終わりから始まりへ自然につながるループにしてください。
一つのテーマに沿って、十五秒のアートアニメーションをデザインしてください。まず、静止画の構図を異なる三つの方向性で提案し、方向性を選んでから、各シーンに一つの主な動きと少しのループする細部を加えてください。音楽を入れる場合は、映像のリズムをビートに合わせ、完成した映像全体に欠けがないか確認してください。
倉庫物流の流れを示すアニメーションを制作し、車両の所定位置への進入、フォークリフトによる荷下ろし、荷物の仕分け、積み込みを順に描いてください。明確な位置関係と途切れない動きで各工程のつながりを表現し、荷物が倉庫をどのように通過するのか、見るだけで理解できるようにしてください。
ポートランドの一日のバス運行を地図アニメーションにまとめてください。まず市全体の路線を表示し、次に各エリアへ順に拡大して、動くマーカーで車両の移動を表してください。淡い色の背景地図を使い、拡大した場面では動きを遅くして、道路と停留所の位置関係を見やすくしてください。
二次元アニメーションで最速降下曲線の問題を説明してください。同じ始点と終点の間で、球が直線、円弧、サイクロイドに沿って落下する様子を同時に表示し、軌跡、経過時間、短い注釈で、距離が最短であることと所要時間が最短であることの違いを示してください。
コードで十六秒のピクセルアートの物語短編を制作してください。まず登場人物、重要な動作、物語の転換点を決め、フレームごとの描画とチップチューンでレトロゲームの質感を作ってください。ピクセルの大きさを統一し、縮小したベクター図形でピクセル描画を代用しないでください。
Remotion と GSAP で小さなモーションデザイン実験室を作ってください。移動距離、文字組み、イージング、モーションブラー、予備動作、動きの余韻を個別に調整できるようにします。すべての状態を同じフレーム時刻で制御し、コマ送りで確認しやすい構成にしてください。
Three.js と SVG を組み合わせ、ユーモラスな3Dアニメーションを作ってください。服装の異なる4羽のペリカンが、浮遊するスポーツカーの上で1台の自転車に乗る場面を描きます。ペダルをこぐ動きと姿勢をそろえ、車体の噴射口と浮遊感が伝わるようにしてください。
参考動画は Sonnet 5.5 と Opus 5.5 の結果を明示したモデル比較です。自分向けのアレンジでは、Three.js を使い、単一の HTML ファイルにビー玉の音楽機械を作ってください。各音の時刻から逆算して玉を放し、衝突と発音を拍に合わせます。レール、接触位置、カメラ構図を分かりやすくしてください。
奥行きのある3D物理実験室を作ってください。重力を切り替える区画、摩擦の違う床、回転して衝突する剛体、互いに反発する流体を配置します。各ルールの整合性を保ち、変化の結果を複数の分かりやすい視点から観察できるようにしてください。
提供されたブランドと製品の資料を基に、コードによるモーション映像を作ってください。絵コンテと主要な視覚要素を計画し、共通の GSAP タイムラインを使い、必要に応じて Three.js の場面を加えます。同じ物体や文字が次の画面を導く構成にします。実際の素材と裏付けのある情報を使い、転換位置、文字の読みやすさ、音楽とのタイミングを確認してください。
Three.js で電動モーターの自動生産ラインを作ってください。鋼材のレーザー切断から、部品加工、搬送、組み立て、最後の回転試験まで順に見せます。設備の動き、材料の経路、工程同士のつながりが分かるようにしてください。
SteamOS のユーティリティを一つ選び、仕組みを短いアニメーションで説明してください。機能、主要モジュール、データの流れを整理し、重要なコードの処理を画面操作の実演や簡潔な図に置き換えます。入力がどのように結果へつながるかを示してください。
ソフトウェアの安全確認をアニメーションで説明してください。最初にリポジトリ、依存関係、権限の全体像を示し、信頼できない入力がクエリへ届くまでを追います。脆弱性の発見時には処理を止め、修正を示した後、元の攻撃が成立するかを独立した再検証で確認する構成にしてください。
提供された車の公開映像とキーフレームを基に、3Dの構造解説を作ってください。観察できる事実と構造上の仮説を分け、分解図と動きの検証を使って部品の関係を説明します。裏付けのない細部は、不確かなものとして明示してください。
既存の楽曲に合わせて、連続する3Dステージ背景を設計してください。Three.js で星空、蛍の森、暖色の高原、オーロラの夜空を作ります。キャラクターの演技を中心にカメラと場面転換を組み、曲の展開に合わせて景色を切り替えてください。
一体のペンギンキャラクターを対象に、特徴を読み取るスキャナーUIを設計してください。最初に実在する特徴を一覧にし、目、装飾品、全身の順でスキャンを見せます。照準、進捗表示、特徴ラベル、最後の評価を使い、処理の順番が伝わるようにしてください。
提供されたナレーションや曲に合わせ、ピクセルアートの短編を作ってください。テーマを表す小物と二つのシルエットを選び、強く聞かせたい三つの言葉を音声の要所に配置します。ピクセルの大きさを統一し、リズムや語調に合わせて画面を切り替えてください。
提供された製品を紹介する、約30秒のモーション映像を作ってください。実際の画面、ロゴ、ブランド素材を使い、それぞれを独立して動かせる要素に分けます。中心となる操作を軸に展開を組み、カット、文字、動きを音楽の拍に合わせてください。
参考動画は Opus 5.5 の結果を明示したモデル比較です。自分向けのアレンジでは、柔らかい身体を持つカピバラを操作できる場面を作ってください。頭や足を引くと全体が伸び、放すと弾んで戻るようにします。押す、投げる、重ねる動作でも形が分かり、隣の個体と自然に接触するようにしてください。
Claude Opus 5.5 と Remotion で、一つの製品機能を紹介する短編を作ってください。ロゴ、画面、フォントを集め、絵コンテをまとめてから、操作イベントと動きを具体的なフレームに割り当てます。リズムを整え、最後に文字組み、配置、場面のつながりを確認してください。
アイデアを伝えて、PagePop で形にしましょう。