강의

멘토링

커뮤니티

Programming

/

Full-stack

ThreeJSとSpringAIで作る3D地球儀記事サービス

ThreeJSとSpringAIで作る3D地球儀記事サービス 自分だけのチャットボットとThreeJSを通じて3D地球儀記事サービスを作ってみましょう!

  • Neo
  • Essential
실습 중심
백엔드이해하기
토이프로젝트
리액트감잡기
AI 코딩
React
Kotlin
Spring Boot
Three.js
SpringAI

学習した受講者のレビュー

受講後に得られること

  • Three.jsを活用して3Dインタラクティブ体験をしていただけます

  • Spring Boot + Spring AIでAIチャットボットを実装することができます

  • 3Dフロントエンドとバックエンドの統合サービス構築経験を体験できます

ThreeJSとSpringAIで作る3D地球儀記事サービス

React、Kotlin、Spring Boot、Three.js、SpringAI

🌎 なぜ3D地球儀記事サービスなのか?

ある日、私はAIと3D技術を組み合わせて新しい形のWebサービスを作ることに深い興味を感じました。
実際のプロジェクトでThree.js基盤の3D地図サービスを作り、Spring Boot + OpenAI API(Spring AI)を活用してユーザーと相互作用し、3D空間上でこれを視覚化するシステムを構築する経験を皆さんがすることになれば、これはユニークな経験になるだろうと確信し、講義を企画・制作することを決心しました。

「AIが生成したコンテンツを3D空間で視覚的に表現したらどうだろうか?」から
始まった講義が、皆さんが受講される中で初めて体験する特別な経験になることを願っています。

理論よりも実戦で経験を通じた成長のための講義!

講義を通じて実装可能なサンプルWebサイトのデモ動画

こんな方におすすめです

🤔

ThreeJS + 3Dを
使ってみたいです

フロントエンドを開発しながらThreeJSの経験を積むことができます!

😆

面白くて他の人がやったことのないプロジェクトをやってみたいです

Inflearn初公開
私だけの面白いプロジェクトです。

😎

SpringAI + 3D ウェブサービス開発が気になります

SpringAI + 3D
ウェブ、サーバー講義のすべてを収録しました。

受講後には

  • Three.jsを活用して3Dインタラクティブ体験をすることができます。

  • Spring Boot + Spring AIでAIチャットボットを実装することができます。

  • 3Dフロントエンドとバックエンドの統合サービス構築経験を積むことができます。

  • CRUDプロジェクトではなく、他の人が経験したことのないユニークなプロジェクトを体験することができます。

この講義の特徴

核心的な特徴と差別化ポイントをご紹介してください。

스크린샷 2025-11-03 오전 12.09.24

ThreeJS + 3Dモデル + API連携

この講義一つに上記のすべてを込めました。

地球儀記事プロジェクトを真似しながら

ThreeJS + 3Dモデル活用 + API

活用経験を学んでみましょう!

Springboot + SpringAI With Kotlin

SpringbootとSpringAIをKotlin環境で開発し、フロントエンドとの連携およびファイル保存の経験をすることができます。

こんな内容を学びます

🌍 Three.jsで3D地球儀を実装する

  • 実際の地球のように回転・拡大・縮小が可能な3D Webサイト制作

  • クリックした位置に応じてアーティクルを表示するインタラクション処理

🤖 Spring AIを活用したAI記事生成・要約機能の実装

  • OpenAI API連携によるユーザーカスタマイズコンテンツ自動生成

  • プロンプトエンジニアリングとAI応答処理ロジック学習

🔗 フロントエンド(Three.js)とバックエンド(Spring Boot)の統合

  • REST APIによる3D地図とサーバー間のデータリアルタイム連携

  • AI応答結果を3D環境に視覚的に反映する


🧩 フルスタックサービス開発経験

  • AI基盤のコンテンツプラットフォーム構造設計

  • フルスタックサービス開発経験

🚀 この講義の目標は??

この講義は単純に技術を学ぶものではありません。
AIと3D技術が結合して一つの完成されたサービスへと発展する過程を実戦例で体験することになります。

受講を終えると皆さんは
👉 自分だけのAIチャットボットと
👉 3Dベースのインタラクティブアーティクルサービス
を直接実装する経験をすることができるでしょう!

信頼できるNeo + Essential
二人の講師コラボ講義評価5.0、講師評価4.7+ Inflearn知識共有者コラボ講義

  • 有名ゲーム会社のサーバー開発者と大企業ファッション会社のフルスタック開発者が共同制作したバックエンド+フロントエンド開発講座

  • 開発理論よりも経験を通じて、普段触れることのなかった開発技術を体験してもらうことを目標に作りました!


ご質問はありますか?

Q1. この講義はフロントエンド中心ですか、それともバックエンド中心ですか?

A1. 両方とも扱います!
Three.jsを利用した3DインタラクティブフロントエンドとSpring Boot + Spring AIで構成したAIバックエンドを一緒に扱い、両技術が一つのサービスとして連携する流れを直接実装します。
単純に画面を描画するだけの講義ではなく、「3D空間に可視化するサービス全体の構造」を学ぶことができます。

Q2. なぜわざわざ3Dで作る必要があるのですか?
A2. 世の中には情報が溢れていますが、視覚的に一目で見やすいコンテンツは珍しいです。
そこで私は「AIが作った記事を3D地球上に表示したらどうだろう?」から出発しました。
単純にテキストではなく、「3Dを通じた空間的な表現体験」が講座の核心です。
結果物を見れば「あ、だから3Dでやる必要があるんだな」と感じていただけるでしょう。

Q3. Spring AIとChatGPT APIの違いは何ですか?

A3. ChatGPT APIをよりSpringらしく使えるようにサポートするライブラリです。
OpenAI APIを直接扱うとJSONパース、例外処理、レスポンスフォーマットなどがかなり面倒ですが、Spring AIを使えばBean設定だけできれいに統合できます。

受講前の参考事項

実習環境

  • オペレーティングシステムおよびバージョン(OS): バックエンド開発環境 (MacOS)、フロント開発環境 (Windows)
    (講義は環境に関係なくついてこられると思います。)

学習資料

  • Notionリンクの提供(リンク内に講義で活用されるファイルやリンクが添付されています)

前提知識および注意事項

  • 講義は理論よりも実際にやってみる経験に焦点を当てました。

  • コンピューターを使ったことがあり、普段ある程度開発をされているなら、難易度は心配しなくても大丈夫です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • AI基盤サービスやチャットボットプロジェクトを直接作ってみたい開発者

  • Three.jsを使ってインタラクティブな3D Webアプリケーションを実装したいフロントエンド開発者

  • Spring Bootを活用したAIバックエンドサービス開発に関心のあるバックエンド/フルスタック開発者

前提知識、
必要でしょうか?

  • コンピュータ基本活用能力

  • 基本的なHTML、CSS、JavaScript文法

  • Spring Bootの基本構造とREST APIの理解

  • 上記の内容は必須ではありません!

こんにちは
です。

1,574

受講生

169

受講レビュー

27

回答

4.6

講座評価

24

講座

안녕하세요! 인프런에서 강의를 진행하고 있는 Neo 입니다.

평소 접하지 못했던 개발기술들을 다양한 분들이 접할 수 있도록 하는게 제 목표입니다.

그래서 저는 단순한 이론 나열보다 실무 중심의 커리큘럼을 구성하고, 트러블슈팅 없이 배울 수 있는 실습 위주의 강의를 제공하고자 합니다.

초보자도 부담 없이 따라올 수 있도록 최대한 가볍고 친절한 접근으로 내용을 구성하고 있으며, 지식에 대한 진입 장벽을 낮추는 것에 특히 집중하고 있습니다.
가끔은 마음이 같은 분들과 함께 강의 작업을 진행하기도 합니다!

협업 및 기타 비즈니스 문의는 yeseong0412@gmail.com 으로 부탁드립니다!

カリキュラム

全体

13件 ∙ (3時間 8分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

8件

5.0

8件の受講レビュー

  • abcd123123님의 프로필 이미지
    abcd123123

    受講レビュー 325

    平均評価 5.0

    5

    100% 受講後に作成

    • yeseong0412
      知識共有者

      講義を聞いてくださってありがとうございます!面白いプロジェクトだったら嬉しいです!ありがとうございます!

  • dkssudgktpdy님의 프로필 이미지
    dkssudgktpdy

    受講レビュー 16

    平均評価 5.0

    5

    100% 受講後に作成

    面白かったです

    • yeseong0412
      知識共有者

      講義を聞いてくださってありがとうございます!

  • loward님의 프로필 이미지
    loward

    受講レビュー 16

    平均評価 5.0

    5

    100% 受講後に作成

    良い講義です。理論よりも実践で面白いプロジェクトを体験できて良かったです。アイデアを活用して様々な試みができそうですね。ありがとうございます。

    • yeseong0412
      知識共有者

      講義を聞いていただき、ありがとうございます!

  • babygroot03035407님의 프로필 이미지
    babygroot03035407

    受講レビュー 3

    平均評価 5.0

    5

    31% 受講後に作成

    • yeseong0412
      知識共有者

      講義を聞いてくださってありがとうございます!

  • wonder12421님의 프로필 이미지
    wonder12421

    受講レビュー 3

    平均評価 5.0

    5

    31% 受講後に作成

    • yeseong0412
      知識共有者

      講義を聞いてくださってありがとうございます!

¥4,235

Neoの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!