강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

Three.jsで一人称3Dウェブサイトを作成する

デスクトップとモバイルの両方で動作する一人称3Dウェブサイトを作成する講義です。

  • studiomeal
3d웹사이트
3d
three.js
Interactive Web
Three.js
JavaScript
Portfolio

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

こんなことが学べます

  • Three.jsのコアコンセプト

  • 一人称3D Webページの実装原理

一人称視点の3Dウェブページを作る講義です。
(Mine * raftのようなゲームの動作を考えればいいです😊

私のウェブサイトhttps://studiomeal.comを見て、多くの方々が「こんなことはどうやって作りますか」お問い合わせをいただきました。そこで、重要な動作を実装するクラスを作成しました。なんとなく、3D空間を作って動きを実装するだけに集中する講義です!

頭を回して、

オブジェクトをクリックして動作させます

物理が適用される世界を作る

モバイルでもうまく動作する例

🤔以前にリリースされた「 Three.jsで始まる3DインタラクティブWeb」レッスンとは何が違いますか?

既存の講義であるThree.jsで始まる3DインタラクティブWebは、Three.jsの基本概念を十分に時間をかけて詳細に取り上げ、いくつかの例を勉強できる「総合講義」です。

このレッスンは、Three.jsの基礎は重要なものだけを素早く見て、 「一人称3D空間実装原理」に集中したレッスンです。

🐣 Three.jsは初めてですが、この講義をすぐに聞くことはできますか?

3D空間の実装に焦点を当てた講義ですが、Three.jsに初めて触れる方も理解できるように、前のセクションで重要な基本内容をまとめて取り上げます。 JavaScriptの基礎だけを理解していれば授業を進めることには支障がありません。無料で公開されたサンプル講義を通じて、講義の難易度を測ってみることができます。 Three.jsについてより基本的な基盤をしっかり積みたい方は、他の講義である「Three.jsで始まる3DインタラクティブWeb」講義も一緒に受講することをお勧めします!

🛤1分コーディングThree.jsロードマップで30%割引クーポンを受け取る

1分コーディングThree.jsロードマップで「全購入適用」の30%割引クーポンを受け取ることができます。
(2つの講義の1つはすでに聞いている方も、ロードマップクーポンで受講申請をすると、新たに受講する講義に30%割引が適用されますので、2つの講義をすべて受講する方はロードマップで受講申請してください!)

ロードマップショートカット

講義の特徴

わかりやすく、画像やアニメーションを活用

動作の実装についての理解が重要な授業であるため、言葉だけで説明せず理解しやすいように部分部分画像やアニメーションなどを活用しました。

一人称3Dウェブサイトの実装に集中した講義です

Three.jsの基本概念を要約し、一人称3D空間を実装することに集中します。すぐに自分だけの3D空間を作ってみたい方に最適です。

受講前の注意

学習資料

  • コードを直接したがって作成できるように、すべてのコードの開始バージョンと完成バージョンを提供します。途中で直接作成したコードに異常が生じて学習の進行に困難がある場合、該当のチャプターのソースコードをダウンロードすると、その部分から同様に学習することができます。

  • 講義で提供するソースコードはプロジェクトに活用できます。

  • 講義が提供するソースコードを直接公開したり、教育用資料を作成したりすることはできません。

選手の知識と注意事項

  • JavaScriptの基礎を理解しておくと、クラスをスムーズに聞くことができます。 JavaScriptのレッスンではありませんが、途中で登場するJavaScriptの概念も説明するので、あまり難しいことはありません。

  • 今回の講義はAI音声で制作されたため、既存の講義と感じが少し異なる場合があります。サンプル講義をチェックして、受講をお願いします😊

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 自分だけの3D空間を作りたい方

  • Three.jsを勉強しましたが、アプリケーションが難しい方

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

  • JavaScriptの基本

こんにちは
です。

19,374

受講生

1,236

受講レビュー

1,175

回答

5.0

講座評価

11

講座

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

カリキュラム

全体

43件 ∙ (3時間 47分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

7件

5.0

7件の受講レビュー

  • Hyungjin님의 프로필 이미지
    Hyungjin

    受講レビュー 20

    平均評価 5.0

    5

    100% 受講後に作成

    어느 정도 Three.js를 알고 있는 상태에서 학습하니 훨씬 더 좋은 거 같습니다. 기존에 알고 있는 내용에 이어서 새로운 것을 알게 되어서 만족스럽네요 설명 방식이랑 구현 원리에 대해 그림이나 시각자료로 이해하기 쉽게 돕는 부분도 너무 좋았어요! 정성스럽고 친절한 강의 잘 들었습니다! ☺

    • 1분코딩
      知識共有者

      감사합니다 형진님- 개념을 이해하기 쉽도록 애니메이션 등의 시각 자료들을 사용해보았는데, 좋게 느끼셨다니 저도 좋네요😊 멋진 작품 만드시길!

  • Thomas님의 프로필 이미지
    Thomas

    受講レビュー 46

    平均評価 4.7

    5

    100% 受講後に作成

    멋진 수업 감사합니다.

    • 1분코딩
      知識共有者

      좋은 말씀 감사합니다 Thomas님 :)

  • 윤인호님의 프로필 이미지
    윤인호

    受講レビュー 1

    平均評価 5.0

    5

    58% 受講後に作成

    이전 강의를 듣고 새로운 THREE.JS 강의가 올라오자마자 듣게 되었는데 프로젝트에 실제 적용하기 위한 핵심 내용만 들어있어서 구현하는 방법만 알고 싶은 분들이 듣기에 좋은 것 같습니다. 반대로 상세하게 알고 싶으신 분들이나 처음이신 분들은 듣다 보면 이해하기 어렵다고 느낄 수도 있을 것 같습니다. 앞선 강의를 듣고 이 강의를 들으니 어떻게 개발하면 될지 새로 알게 돼서 더 좋은 것 같아요!

    • 1분코딩
      知識共有者

      자세한 수강평 남겨주셔서 감사합니다 인호님 :D 이번 강의는 Three.js를 처음 접하는 분들이 들을 수 있으면서도, 이전 강의를 수강하신 분들께도 새로운 내용을 전해드리고 싶다는 생각이었는데- 이어서 들은게 도움이 되셨다는 말씀을 해주시니 감사하네요! ^^

  • 문정훈님의 프로필 이미지
    문정훈

    受講レビュー 5

    平均評価 5.0

    5

    100% 受講後に作成

    어려운 내용을 쉽게 배울 수 있었습니다.

    • 1분코딩
      知識共有者

      첫 수강평과 좋은 말씀 감사드립니다 정훈님😊 멋진 작품 만드시길 바라겠습니다!

  • jongchan.lee님의 프로필 이미지
    jongchan.lee

    受講レビュー 1

    平均評価 5.0

    5

    30% 受講後に作成

    ¥10,375

    studiomealの他の講座

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

    似ている講座

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