Three.jsとは？初心者向けにAIでの導入と活用を解説
2026年10月27日
家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。
この記事は初心者向けに、Three.jsをAIに頼んで入れて、自分のPCで回る立方体をブラウザに表示するところまでを試せます。
3行でわかるポイント
- Three.jsはブラウザで3Dを描くためのJavaScriptライブラリです
- チャット型のAIそのものではありません
- 私はURLだけを伝えて制作環境を用意してもらい、回る立方体をブラウザで確認しました
Three.jsは何の道具か
Three.jsは、ブラウザの中で3Dを表示するためのJavaScriptのライブラリです。ChatGPTのように会話する製品ではありません。コードの部品です。npmというパッケージの管理場所では「JavaScript 3D library」とされています。ライセンスはMITで、誰でも無料で使えます。
GitHubのREADMEには「The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library.」と書かれています。使いやすく、軽く、いろいろなブラウザで動く汎用の3Dライブラリを目指したものです。標準のビルドにはWebGLやWebGPUのレンダラーが含まれます。WebGLは、ブラウザの中でプラグインなしに3Dや2Dを描くための仕組みです。対応するパソコンやスマホ、ブラウザが必要になります。
料理で言うと、Three.jsは出汁のようなものです。これだけでは完成品になりませんが、3Dの味の土台になります。公式サイトにはexamplesやdocs、manual、editorがあります。
AIとThree.jsで何ができるか
AIに頼むと、制作環境の準備や最初のシーン作成まで任せられます。私が実際にAIへ伝えたのは、これだけです。
これいれて。 https://threejs.org/確認のあと、「制作環境を用意する」を選びました。一言で全部が自動で終わるわけではありません。結果として、npmとViteという経路で、回転する立方体がブラウザに表示されました。
公式のmanualでは、常時描画しなくてもよい例として、地図ビューアや3Dエディタ、3Dグラフ、商品カタログなどを挙げています。Three.jsはゲームエンジンではありません。「three.js is not a game engine」と書かれています。衝突判定や物理演算、入力の仕組み、経路探索などは自分で実装する必要があります。3Dモデルを読み込むときは、可能な限りglTFという形式を推奨しています。OrbitControlsを使うと、カメラを対象の周りにドラッグで回す操作ができます。
商用の例として、作者や制作会社が説明しているものが3件あります。
キッチンのショールームでは、素材を切り替えながらキッチンを3Dで確認できます。Interactive 3D Kitchen Showroom
店舗家具の配置では、家具をドラッグしてレイアウトを検討できます。Muuble configurator
パティオカバーの見積では、形を変えてリアルタイムで価格を確認できます。Thermogreen case
導入前の準備
公式ではnpmとビルドツールを使う方法を、ほとんどの人向けに推奨しています。今回私が使ったのもこの経路です。Node.jsは、パソコンの中でJavaScriptを動かすための土台です。npmはその中に含まれる、ライブラリを追加するための道具です。Viteは、開発中の画面をすぐ確認できるようにするビルドツールの一つです。ターミナルは、パソコンに命令を文字で伝える画面です。ローカルサーバーは、自分のパソコンの中だけでWebページを見られるようにする仕組みです。
本番で使うNode.jsは、nodejs.orgが示すsupported LTS（現在サポートされている長期版）だけにしてください。2026-10-27時点の表では、v22 Jodとv24 KryptonがLTSです。v20 IronはEOL（サポート終了）です。私の環境ではv22.23.4を使いました。最低限の要件より、今サポートされているv22やv24のLTSを選ぶのが安心です。Viteを使う場合はNode 20.19以上または22.12以上が必要ですが、v20は避けてください。
Node.jsがパソコンに入っていない場合は、AIに公式のダウンロードページと、自分のOS（MacやWindows）に合ったインストール手順を案内してもらってください。作業は独立したフォルダで行ってください。既存のサイトや他のファイルへは自動で反映されません。WebGLが使える環境であることも確認します。
最初の3D表示まで
普通のチャットAIは、パソコンの中のファイルを作ったり、コマンドを実行したりできません。実行権限のある開発用のAIが必要です。読者の方が試すときの例として、Cursorを使った流れを書きます。今回私がCursorを使ったわけではありません。公式の手順は Cursor Quickstart と Cursor Agent Overview で確認できます。
まずCursorをダウンロードしてログインします。空のthreejs-practiceというフォルダを作り、Cursorで開きます。AgentをCmd+I（Mac）またはCtrl+I（Windows）で開きます。そこに後述のプロンプトを貼り付けます。AIがファイルを変更したりコマンドを実行したりする内容を確認します。返ってきたローカルのURL（例: http://localhost:5173/）をブラウザで開きます。回転する立方体が表示され、ドラッグで視点を回せるところまで確認します。
コマンドを実行するときは、AIにそのコマンドの目的を説明してもらってください。起動したターミナルでCtrl+Cを押すと停止します。自分のパソコンの中で動作を確認する段階と、インターネットへ公開する段階は別です。公開は後で判断してください。Cursorの利用条件や料金はプランによって異なります。Three.jsのMITライセンスとは別の話です。
ブラウザが真っ黒のままの場合は、ブラウザの開発者ツールに出ているエラーメッセージをコピーして、AIに送って直してもらってください。
実際の依頼例と読者向けコピペプロンプト
私が実際に伝えた指示は、先ほどの短い一文だけです。読者がCursorのAgentなどに貼るときの推奨プロンプトは、条件を補った別のものです。
https://threejs.org/ これを入れて。作業フォルダ例 threejs-practice。既存ファイルは壊さない。公式手順に沿ってNodeの有無を確認し、threeとViteで最初の回転立方体とドラッグ操作まで。起動・停止・ブラウザ確認まで。公開や有料サービス契約はしない。既存のファイルや設定は一切触らない。独立フォルダだけを使う。Nodeはsupported LTS（v22またはv24）だけを確認する。v20は使わない。起動後はブラウザで表示を確認し、停止方法も教える。公開や課金は行わない。確認のステップを省かないでください。
導入後の用途別依頼例
基本の立方体が出たら、用途を一つに絞って追加依頼します。
商品ビューアの例です。Beforeは写真だけの商品ページ。Afterはブラウザで回して見られる立方体です。
回転する青い立方体を商品に見立ててください。自動でゆっくり回転し続けるようにして、継続して描画してください。一時停止ボタンを付けてください。カメラの初期位置は少し斜め上から。ドラッグで視点を回せるようにしてください。公開はしない。家具の配置説明の例です。Beforeは平面図だけ。Afterは机と椅子2脚を置いて寸法が見える画面です。
机1台と椅子2脚を床の上に配置してください。机は幅120cm・奥行き60cm・高さ72cm、椅子は座面高さ45cmとして寸法を画面に表示してください。カメラの初期位置は正面やや上から。ドラッグで視点を回せるようにしてください。自動回転はしないで、操作があったときだけ描画してください。公開はしない。教育の例です。Beforeは静止画の説明。Afterはスライダーで縦横高さを変えて体積を学ぶ画面です。
立方体の縦・横・高さをスライダーで変えられるようにしてください。変えた値と体積を画面に表示して、体積の計算を学べる画面にしてください。カメラの初期位置は正面。ドラッグで少し視点を動かせるようにしてください。自動回転はしないでください。公開はしない。向く用途・向かない用途・コスト
向く用途は、商品を3Dで見せるカタログ。家具の配置を説明する画面。講座の図解。簡単な操作のある説明です。向かない用途は、衝突や物理、経路探索をすぐ使いたい本格ゲームです。自前で実装する必要があります。コストは、Three.js本体が無料です。NodeやViteも無料で使えます。AIの利用料やCursorのプラン料金は別です。公開する場合のホスティングも別です。
よくある失敗と直す依頼例
Nodeのバージョンを間違える失敗です。v20はEOLです。
Nodeのバージョンを確認して。v20は使わない。supported LTSのv22またはv24だけを使う。フォルダを独立させない失敗です。
作業は独立フォルダだけにして。既存のファイルや設定には触れない。threejs-practiceのような新しいフォルダを作って。ローカルサーバーを立てずに確認しようとする失敗です。
開発サーバーを起動して。返ってきたローカルURLを教えて。ブラウザで開いて確認して。停止方法も教えて。WebGLが使えない環境で試す失敗です。端末やブラウザの対応を確認してください。
Q. コードを書けなくても導入できますか？
A. 開発用のAIに環境準備と最初のシーンまで任せられます。ただし、ファイルの変更内容や起動結果は自分で確認します。
Q. 無料で使えますか？
A. Three.jsはMITライセンスで無料です。AIやCursorの利用料、公開時のホスティングは別です。
Q. 普通のチャットAIだけで全部できますか？
A. 普通のチャットAIはパソコンのファイルを作ったりコマンドを実行したりできません。実行権限のある開発用のAIが必要です。
Claude Codeの機能は全部使う？20個から3個だけ選ぶ見方
段取りと権限は、任せる前に決めておく2枚の約束です。
Three.jsの導入でも、作業フォルダを独立させ、公開や課金をしない範囲を先に決めてからAIに任せます。
Hermes Agentとは何か、Grok Botやdotsとの違いをハーネスから整理
借りるPCでも自分のPCでも、箱を作るのも、指示文を書くのも人の側です。
Three.jsも、独立フォルダを用意し、「これいれて」と指示を書くところから始まります。
AGI Cockpitとは？複数のAIを1画面で動かす無料アプリを実運用データで解説
ただしClaude CodeやCodexを動かす場合は、それぞれのCLIのインストールと契約が必要です。
Three.jsのnpmとVite経路でも、Node.jsの準備と、使うAIの実行権限は別途確認が必要です。
まとめ
Three.jsは、ブラウザで3Dを描くためのJavaScriptライブラリです。チャット型AIではありません。私は「これいれて。 https://threejs.org/」と伝えて、制作環境を用意してもらいました。回る立方体がブラウザに出るところまで確認しました。
読者の方は、Cursorのような開発用のAIを使って、独立フォルダで同じところまで試せます。自分のパソコンの中で確認する段階と、インターネットへの公開は別です。
要点は3つです。
3行でわかるポイント
- 最初はURLと制作環境の用意だけで、回る立方体まで出せます
- Nodeはサポート中のv22またはv24 LTSを使います
- 用途を一つに絞って、短い追加依頼で広げます
一緒に、小さな画面から試してみませんか。
参考リンク
🎁 無料プレゼント
Aiport（ClaudeCode AIエージェント実践会）
ClaudeCodeでAI秘書＋分身AI＋AIカンパニーが無料で作れるキット＆解説動画をプレゼント！
▶ 無料で入会してキットを受け取る🤖 AI生成コンテンツについて
この記事はAIツール（Claude Code）を活用して制作しています。構成・文章生成・画像制作にAIを使用し、最終的な内容の確認・編集・公開判断はひろくん（田中啓之）本人が行っています。「分身AIひろくん」（bunshin-ai.com）とは別のコンテンツです。
