始める

AIとThree.jsで3Dサイトを作成

プロジェクトに似た方向性から始めて、仕組み、外観、対象ユーザーを変更してから、さらに構築していきます。Three.jsを使ったインタラクティブな3Dサイトを作成できます。WebGL環境、ポートフォリオ、製品紹介などをブラウザーに公開できます。

まずはここから
  • 無料のスタータークレジット
  • コーディング不要
  • 生成前にコストを確認
  • ブラウザーで動作

パートナーとチーム

Google
Stanford University
itch.io
Tencent
Harvard University
AWS
POKI
TikTok
UC Berkeley
Microsoft
Demon Slayer
Baidu
Columbia University
NVIDIA
ANIPLEX
The University of Hong Kong
Trustpilot

使い方

アーケード風のタイムアタックを作る

海沿いのコースを、タイムを競えるレースにしましょう。

  1. ステップ 1
    ヘアピン、スタートライン、レーシングカーを描いた海沿いのコースのスケッチ

    最初の一周を描く

    長い直線ときついヘアピンがある海沿いのコースを想像してください。ゴールではラップタイムを表示します。

  2. ステップ 2
    海沿いのコース、車、チェックポイント、計時ルールを示す作業画面のイメージ

    SEELEでコースを作る

    seeleAgentにコースを作らせ、車の操作を設定します。順番に通過したときだけラップが有効になるチェックポイントを置きましょう。

  3. ステップ 3
    海沿いのチェックポイントへ向かう車。ラップ数、タイマー、ミニマップ、速度計が表示されている

    最初のラップタイムを出す

    チェックポイントを通過してゴールラインを越えます。タイムを確認し、次の周で更新を狙いましょう。

    無料でゲームを作る

作りたい内容を選ぶ

プレイ可能な方向から始めます。

プロジェクトに似た方向性から始めて、仕組み、外観、対象ユーザーを変更してから、さらに構築していきます。

🎁 3D 製品ショーケース

回転ビューとホットスポットを備えたインタラクティブな 3D 製品ディスプレイを構築します。

プロンプト

Three.js を使用して、回転カメラとインタラクティブなホットスポットを備えた 3D 製品ショーケース Web サイトを作成する

  • js を使用して、回転カメラとインタラクティブなホットスポットを備えた 3D 製品ショーケース Web サイトを作成する
  • 回転ビューとホットスポットを備えたインタラクティブな 3D 製品ディスプレイを構築します。
  • AIとThree.jsで3Dサイトを作成: review the stated requirements.
3D製品ショーケース🎁 3D 製品ショーケース ↗

SEELEを選ぶ理由

次の決断は実際のもので行ってください。

完全な Three.js コード生成

自然言語からプロトタイプ対応の Three.js および WebGL コードを生成します。 SEELE AI は、最適化されたレンダリング、物理統合、インタラクティブなコントロールを備えた完全な 3D Web サイトを作成します。手動でコーディングする必要はありません。

AI を活用した 3D アセットの作成

Three.js Web サイト用の完全な 3D モデル、PBR テクスチャ、アニメーションを生成します。 SEELE AI は、製品モデルからキャラクター アニメーションまで、WebGL のパフォーマンスに最適化されたゲーム対応アセットを作成します。

ブラウザ対応の導入

Web ホスティング用に最適化された Three.js プロジェクトをエクスポートします。 SEELE AI は、自動パフォーマンス チューニング、遅延読み込み、デスクトップおよびモバイル ブラウザー向けのレスポンシブ デザインを備えた、WebGL に最適化されたコードを生成します。

対象者と目的

エクスペリエンスが誰に役立つのか、そして成功するために何をする必要があるのかを定義します。

品質と継続性

事実との適合性、独創性、連続性、アクセシビリティ、および各部分が連携して動作するかどうかをチェックします。

制作・発売

実装、共有、公開、または別の作業の準備ができているものを決定します。

SEELEで作成

プレイできる作例

実際に遊べるゲームです。選んで試してみましょう。

対象ユーザー

誰のためのものですか?

開発者、テクニカル アーティスト、プロトタイプの所有者は、このページを使用して、大規模なビルドや起動の前に、プロジェクトの 1 つの決定を簡単にテストできます。

3D製品ショーケース

ウェブ開発者とデザイナー

インタラクティブな 3D Web サイト、WebGL ポートフォリオ、没入型 Web エクスペリエンスを作成します。手動の Three.js コーディングをスキップして、クリエイティブなビジョンに集中してください。

このアイデアを試す ↗
3DポートフォリオWebサイト

ゲーム開発者

Three.js を使用してブラウザベースの 3D ゲームを構築し、拡張開発のために Unity または Unreal Engine 5 にエクスポートします。プロトタイピングから生産までを迅速に行います。

このアイデアを試す ↗
3D パーティクルの Web サイト

Eコマースおよび製品チーム

インタラクティブな 3D ディスプレイと WebGL 視覚化を使用して製品を紹介します。コンバージョンを増加させる魅力的なショッピング エクスペリエンスを作成します。

このアイデアを試す ↗

比較

SEELE Three.js 編集者 vs 競合他社

SEELE AI の Three.js エディターと他の 3D Web サイト ビルダーとの比較。

項目ローズバッドAISEELE AI
エクスポートオプションWeb のみの展開。 Unity またはゲーム エンジンのエクスポートはありません。マルチエンジン エクスポート: Three.js (Web)、Unity プロジェクト、Unreal Engine 5 (サブスクリプション ユーザーが利用可能)。
3D アセットの生成基本的な 3D モデル。アセットのカスタマイズが制限されています。完全な 3D パイプライン: モデル、PBR テクスチャ、アニメーション、リギング、最適化。
2Dのサポート2D スプライトの生成が制限されています。 3D に重点を置いたプラットフォーム。高度な 2D サポート: スプライト シート、ピクセル アート、フレーム アニメーション、2D ゲーム。
最初の範囲まず一つのタスクや操作を試す結果を見てから範囲を広げる
確認方法先に決めた条件で場面や出力を確認する利用先で形式・依存関係・制限を確認する

レビュー

クリエイターの動画

よくある質問

Three.js エディター - 3D ウェブサイトの構築に関する質問…

AIとThree.jsで3Dサイトを作成のプロンプトには何を含めるとよいですか?

目的の出力、試したい操作や機能、制約を一つ指定します。「🎁 3D 製品ショーケース」を出発点にして、成功と判断する条件も書きます。

AIとThree.jsで3Dサイトを作成で最初に試す内容はどう選べばよいですか?

このページの例から一つ選び、プロジェクトで確認したい点を具体化します。例:回転ビューとホットスポットを備えたインタラクティブな 3D 製品ディスプレイを構築します。

最初の制作範囲を小さく保つには?

最初は一つのシーン、操作、素材、またはショットに絞ります。確認できる状態になってから範囲を広げます。

結果はどのように確認すればよいですか?

依頼内容と結果を照らし合わせ、実際に使う環境で操作を試します。プロンプトを変える前に差分を記録してください。

既存の参考資料や素材を使えますか?

はい。参考資料はスタイルや要件の説明に使えます。共有・公開する前に利用許可を確認してください。

結果をそのまま公開できますか?

生成結果は下書きとして扱います。公開前に内容、権利、アクセシビリティ、性能、対象プラットフォームやエンジンの要件を確認してください。

2つの方向性をどう比べればよいですか?

操作、構図、仕組み、素材など、重要な点を一度に一つだけ変えます。どの変更が結果に影響したか判断しやすくなります。

結果を別のツールに移せますか?

利用先に対応する Workspace と書き出し機能を確認してください。特定のエンジン、形式、連携に対応すると決めつけないでください。

チームで最初に決めておくことは?

対象ユーザー、最初に確認する成果、使えない条件を決めます。まず一つの具体例で話し合います。

意図と異なる結果をどう直せばよいですか?

最初の目的に戻り、ずれの原因になった箇所だけを直して同じ条件で試します。範囲を広げるのはその後です。

結果に影響する情報は何ですか?

対象、形式、参考資料、確認条件が結果を左右します。最初の確認に必要な制約だけを指定してください。

最初の結果は誰が確認するとよいですか?

想定する使い方を理解している人に、依頼内容と結果を照らしてもらいます。

初回の案に含めないものは何ですか?

追加機能や仕上げは次の段階に回します。

次回の修正に向けたメモはどう残せばよいですか?

再度修正する前に、変更点・理由・確認結果を記録します。

AIとThree.jsで3Dサイトを作成

AIとThree.jsで3Dサイトを作成の目標、無理のない範囲、確認方法を決めて、最初の案をまとめます。

作成を開始する →