강의

멘토링

커뮤니티

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

受講生

1,273

受講レビュー

1,175

回答

5.0

講座評価

11

講座

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

カリキュラム

全体

43件 ∙ (3時間 47分)

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

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

受講レビュー

全体

8件

5.0

8件の受講レビュー

  • hjux님의 프로필 이미지
    hjux

    受講レビュー 21

    平均評価 5.0

    5

    100% 受講後に作成

    ある程度Three.jsを知っている状態で学習すると、はるかに良いようです。 既に知っている内容に続き、新しいことを知って満足しています。 説明方式と実装原理について、絵や視覚資料でわかりやすく助ける部分もとても良かったです! 丁寧でフレンドリーな講義をよく聞きました!

    • studiomeal
      知識共有者

      ありがとうございます。 概念を理解しやすいようにアニメなどの視覚資料を使ってみましたが、良く感じられたなんて私もいいですね😊 素敵な作品を作ろう!

  • orangewebcenter2238님의 프로필 이미지
    orangewebcenter2238

    受講レビュー 46

    平均評価 4.7

    5

    100% 受講後に作成

    素敵な授業ありがとうございます。

    • studiomeal
      知識共有者

      ありがとうございましたThomas:)

  • dlsgh24681368님의 프로필 이미지
    dlsgh24681368

    受講レビュー 1

    平均評価 5.0

    5

    58% 受講後に作成

    以前の講義を聞いて新しいTHREE.JS講義が上がるやいなや聞くようになりましたが、プロジェクトに実際に適用するための核心内容だけが入っていて、実装する方法だけを知りたい方が聞くのに良いようです。逆に詳しく知りたい方や初めての方は聞いてみると理解しにくいと感じることもあるようです。先の講義を聞いてこの講義を聞くので、どのように開発すればいいのか新しく分かるようになって、もっと良いようです!

    • studiomeal
      知識共有者

      詳細な講義を残していただきありがとうございます。 今回の講義は、Three.jsに初めて接する方が聞くことができながらも、以前の講義を受講された方にも新しい内容をお伝えしたいと思いました。 ^^

  • ohmymoon님의 프로필 이미지
    ohmymoon

    受講レビュー 5

    平均評価 5.0

    5

    100% 受講後に作成

    難しい内容を簡単に学べました。

    • studiomeal
      知識共有者

      初受講評と良い言葉ありがとうございますチョンフン様😊 素敵な作品を作ってほしい!

  • sduddla님의 프로필 이미지
    sduddla

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    期間限定セール

    ¥61,600

    30%

    ¥11,082

    studiomealの他の講座

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

    似ている講座

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