강의

멘토링

로드맵

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,373

受講生

1,236

受講レビュー

1,175

回答

5.0

講座評価

11

講座

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

カリキュラム

全体

43件 ∙ (3時間 47分)

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

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

受講レビュー

全体

7件

5.0

7件の受講レビュー

  • hjux님의 프로필 이미지
    hjux

    受講レビュー 20

    平均評価 5.0

    5

    100% 受講後に作成

    I think it's much better to learn it after having some knowledge of Three.js. I'm satisfied because I learned something new along with what I already knew. I also really liked the part where the explanation method and implementation principles were explained in an easy-to-understand way with pictures and visual aids! I listened to the sincere and kind lecture well! ☺

    • studiomeal
      知識共有者

      Thank you Hyungjin-nim- I tried using visual aids such as animations to make it easier to understand the concept, and I'm glad you liked it😊 I hope you create a great piece!

  • orangewebcenter2238님의 프로필 이미지
    orangewebcenter2238

    受講レビュー 46

    平均評価 4.7

    5

    100% 受講後に作成

    Thank you for the great class.

    • studiomeal
      知識共有者

      Thank you for your kind words Thomas :)

  • dlsgh24681368님의 프로필 이미지
    dlsgh24681368

    受講レビュー 1

    平均評価 5.0

    5

    58% 受講後に作成

    I listened to the new THREE.JS lecture right after I listened to the previous lecture, and it only contains the core content for practical application to projects, so it seems good for those who only want to know how to implement it. On the other hand, those who want to know in detail or those who are new to it may feel difficult to understand as they listen. I listened to the previous lecture and this lecture, and I think it's better because I learned a new way to develop!

    • studiomeal
      知識共有者

      Thank you for leaving a detailed review, Inho :D I wanted to make this lecture suitable for those who are new to Three.js, but also provide new content to those who have taken the previous lecture - I am grateful that you said that listening to it was helpful! ^^

  • ohmymoon님의 프로필 이미지
    ohmymoon

    受講レビュー 5

    平均評価 5.0

    5

    100% 受講後に作成

    I was able to learn difficult content easily.

    • studiomeal
      知識共有者

      Thank you for your first class review and kind words, Jeonghoon. 😊 I hope you create great works!

  • jongchanlee2597님의 프로필 이미지
    jongchanlee2597

    受講レビュー 1

    平均評価 5.0

    5

    30% 受講後に作成

    ¥10,375

    studiomealの他の講座

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

    似ている講座

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