Gemini3 Pro Canvas で 360° HDRI パノラマビュアー - 日本語プロンプトでノーコード Webアプリ制作テクニック

簡単な日本語プロンプトで、シンプルなWebアプリをGemini3 Pro Canvasで制作してみました。今回は、回転する立方体ビュアーと、マウスドラッグ+ホイールで360°を見回しズームできる360°パノラマビュアーを紹介します。

このWebアプリを進化させ、3Dアニメーションビュアーを統合化し、レスポンシブWebデザインでモバイル対応も行った「Dg 3D Viewer」を以下の記事で紹介しています。

Gemini3 Pro Canvasを開く

私の場合は、Chromebook Plusなので、シェルフ（タスクバー）にアイコンがあるのでクリック。（または、こちら >>> Gemini ）

「New! Veo 3.1…」の左の「X」をクリックして消し、「ツール」メニューを表示。

「Canvas」を選択。

右下のメニューから「思考モード（3 Pro 搭載）」を選択。

立方体の3Dプレビューアプリを試作

プロンプト

Geminiからのレスポンス

Chromeなどのブラウザにドラッグ・アンド・ドロップするだけで動作する、3Dの回転する立方体のHTMLコードを作成しました。

このコードは単一のファイルで完結していますが、3Dライブラリ（Three.js）をインターネット経由（CDN）で読み込んでいるため、実行にはインターネット接続が必要です。

手順

1. 下記のコードを保存（例：cube.html）します。

2. 保存したファイルをChromeの新しいタブにドラッグ・アンド・ドロップしてください。

3. 回転する3Dキューブ

4. 11月27日 13:26

5. Canvas なしで再試行

解説

このコードは以下の要素で構成されています。

1. Three.jsの読み込み: scriptタグでCDN（Web上のライブラリ置き場）から3Dエンジンを読み込んでいます。

2. シーン設定: カメラやライト（照明）を配置し、物体が見えるように設定しています。

3. 立方体の作成: BoxGeometry（箱の形状）とMeshPhongMaterial（光沢のある質感）を使って青緑色の立方体を作っています。

4. アニメーション: animate関数の中で少しずつ角度（rotation）を変え続けることで、回転しているように見せています。

5. レスポンシブ対応: ブラウザのウィンドウサイズを変えても、崩れないように自動調整する処理を入れています。

HTMLコードの保存

右上の「コード」タブをクリックすると、HTMLコードが表示されます。

右上の「共有」をクリック。

メニューの「内容をコピー」をクリック。

私の場合は、テキストエディターに貼り付け、ファイル名を「Gemini3-3D-Cube.html」として保存。

Chromeブラウザーで3Dプレビュー

保存したHTMLファイルをChromeブラウザーの新しいタブにドラッグ&ドロップ。

360°パノラマビュアー

パノラマ画像をダウンロード

Poly Havenから360°パノラマHDRI画像をダウンロード。

ダウンロードしたHDRI画像を事前にGemini3にアップロードしておきます。

プロンプト

Geminiからのレスポンス

アップロードされたHDR画像ファイル（christmas_photo_studio_03_4k.hdr）を読み込み、ブラウザ上で360度グリグリと動かせる3Dビューワーを作成します。

このアプリは以下の機能を持ちます：

1. HDRサポート: RGBELoaderを使用し、高ダイナミックレンジ画像を正しく処理して表示します。

2. 360度ナビゲーション: マウスやタッチ操作で視点を自由に回転・ズームできます。

3. ファイルアップロード: 別のHDR（または画像）ファイルをドラッグ＆ドロップしてプレビューを切り替えることも可能です。

4. 360度パノラマビューワー

5. 11月28日 15:56

読み込んだHDR画像を使って、3D空間プレビューアプリを作成しました。

使い方

1. プレビュー: アプリが起動すると、アップロードされた christmas_photo_studio_03_4k.hdr が自動的に読み込まれます。

2. 操作方法:

   • 回転: マウスの左ボタンドラッグ（またはタッチスワイプ）で視点を移動します。

   • ズーム: マウスホイール（またはピンチ操作）で拡大縮小します。

3. ファイルの変更: 左上のパネルにある「ファイルを変更」ボタンから、お手持ちの別のパノラマ画像（.hdr, .jpg, .png）をアップロードして試すこともできます。

自動回転モードになっているので、ゆっくりと景色が回ります。「自動回転 切替」ボタンで停止できます。

360° HDRI パノラマビュアーのWebアプリが完成するまで、ここからいくつかコードを改善する必要がありました。

これ以降は有料エリアになります。ご購読をよろしくお願いいたします。

少しでもみなさまのお役に立てれば幸いです。