강의

멘토링

커뮤니티

Programming

/

Full-stack

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

ThreeJSとSpringAIで作る3D地球儀アーティクルサービス | Neo + Essential 自分だけのチャットボットとThreeJSを通じて3D地球儀アーティクルサービスを作ってみましょう!

難易度 初級

受講期間 無制限

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

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

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

5.0

5.0

HelloWorld

100% 受講後に作成

面白かったです

5.0

DKN

100% 受講後に作成

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

5.0

Essential

31% 受講後に作成

講座を受講すると、フルスタック開発と3D技術の両方を学習することができます。特別なウェブ技術スタックを学び、単純なCRUDではない新しいプロジェクト体験をしたい方には、この講座をおすすめします。

受講後に得られること

  • 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空間で視覚的に表現したらどうだろう?」という
発想から始まった講義が、皆さんが受講しながら初めて体験するユニークな経験になればと思います。

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

講義を通じて実装可能なサンプルウェブサイトのデモ映像

こんな方におすすめです

🤔

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

フロントを開発しながらThreeJSの経験ができます!

😆

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

インフラーン初公開
自分だけの面白いプロジェクトです。

😎

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
2人の講師によるコラボ講義 講義評価 5.0、講師評価 4.7+ インフラーン知識共有者コラボ講義

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

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


気になることはありますか?

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

A1. 両方扱います!
Three.jsを利用した3DインタラクティブフロントエンドとSpring Boot + Spring AIで構成したAIバックエンドを共に扱い、2つの技術が1つのサービスとして繋がる流れを直接実装します。
単に画面を描くだけの講義ではなく、「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の理解

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

こんにちは
です。

2,253

受講生

253

受講レビュー

38

回答

4.7

講座評価

29

講座

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

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

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

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

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

カリキュラム

全体

13件 ∙ (3時間 8分)

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

受講レビュー

全体

9件

5.0

9件の受講レビュー

  • aboutexo046263님의 프로필 이미지
    aboutexo046263

    受講レビュー 23

    平均評価 4.9

    5

    31% 受講後に作成

    • yeseong0412
      知識共有者

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

  • abcd123123님의 프로필 이미지
    abcd123123

    受講レビュー 327

    平均評価 5.0

    5

    100% 受講後に作成

    • yeseong0412
      知識共有者

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

  • dkssudgktpdy님의 프로필 이미지
    dkssudgktpdy

    受講レビュー 20

    平均評価 5.0

    5

    100% 受講後に作成

    面白かったです

    • yeseong0412
      知識共有者

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

  • loward님의 프로필 이미지
    loward

    受講レビュー 21

    平均評価 5.0

    5

    100% 受講後に作成

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

    • yeseong0412
      知識共有者

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

  • babygroot03035407님의 프로필 이미지
    babygroot03035407

    受講レビュー 3

    平均評価 5.0

    5

    31% 受講後に作成

    • yeseong0412
      知識共有者

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

¥4,161

Neoの他の講座

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

似ている講座

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