【Three.js入門】モダンな3Dフロントエンド技術を習得して周りのエンジニアと差をつけよう！
Three.jsをあなたはご存じですか？Three.jsを学べば「これまでとは全く違う2D→3Dのフロントエンド技術」を扱えるようになります。ありふれたフロントエンドエンジニアで埋もれたくないあなたへ贈るThree.js基礎マスターコース。
4.73 (518 reviews)
3,301
students
8.5 hours
content
Jul 2022
last update
$54.99
regular price
What you will learn
ThreeJsの基礎と概念が理解できるようになる
ThreeJsで利用されているクラス・関数についての詳細な解説
ThreeJsでモダンな3Dウェブサイトが作成できるようになる
ThreeJsの開発環境構築を学びます
3DCG等の分野で利用されている数学的知識を学びます
ブラウザ上で自由自在に3Dオブジェクトが表現できるようになる
ThreeJsでの開発の流れを学びます
シーン、カメラ、レンダリングの関係性を学びます
ジオメトリの基礎を学びます
UIデバッグの基礎を学びます
マテリアル・メッシュの基礎を学びます
光源(ライト)の基礎を学びます
カメラの基礎を学びます
カメラコントロール制御の基礎を学びます
応用としてパーティクル表現方法を学びます
パーティクルアニメーションを学びます
実践としてThreeJsでモダンな3Dウェブサイトを作成します
よりリアルなジオメトリの表現方法を環境マッピングを利用して学びます
Viteを使ったThreejs開発環境を構築法を学びます
スクロール率に応じてカメラや物体の制御方法を学びます
Why take this course?
周りのフロントエンドエンジニアより一歩先へ進んでみたい「好奇心のある人だけ」を対象にしています。
「2D表現のフロントエンド技術は飽きちゃった・・・」
「Three.jsでモダンな3Dウェブサイトが作れるようになりたい！」
「Three.jsは前から学びたいと思ってたけど、難しいイメージなんだよね・・・」
「手軽に分かりやすくThree.jsを学んでみたい！ 」
「webGLとかOpenGL周辺の知識に興味がある！」
お任せください。
本講座があなたの欲求に答えます。
生ぬるい根性論や精神論ではなく、あなたが求めるThree.jsの技術だけを提供します。
■本コースでは教えないこと
・HTML/CSS/JavaScriptの基本的な文法とルール
・webgl/glsl言語
・Blender等の他3Dソフトの扱いとインポート
・シェーダー言語
Screenshots
Reviews
Su
October 2, 2023
Three.jsを初めて学びましたが、頭から抜け落ちていた数学の部分や理解しづらい部分など毎回図を書いてイメージをしやすくしてくださったり、噛み砕いて一つ一つのコードの説明をしてくださったおかげで非常に楽しく学習を進めることができました。
発展講座も購入したので、これからの学習の続きも楽しみです！
ありがとうございました！
野村
July 9, 2023
JavaScript苦手なのですが、とても分かりやすかったです！
【補足】
「まずは簡単にThree.jsにふれてみよう」内の「マウスで動かせるようにしてみよう」でバージョン違いによるエラーが起きてしまった箇所がありました。修正の参考にしたページを共有します。（three.js Ver.r154使用）
https://teratail.com/questions/nljocoetuf0uxx
大洞
June 2, 2023
このコースで３Dグラフィックの基本とThree.jsを使った3D描画ハンズオン形式で学ぶ事ができました。Blenderなどの3Dグラフィックツールを使う際も考え方や用語が共通なのですぐに理解できました。3Dグラフィックの基本を学ぶのにThree.jsは分かり易くて最適です。
ホンマル
January 28, 2023
Three.jsの基本機能＋実装を分かりやすく説明してくれます。
実際に動くものが作れるので、何より楽しい。
もしよろしければ、Blender等で作成したモデルやアニメーションの読み込み等、さらに進んだ内容を取り扱う講座も作成していただけるとありたがいです！
Yosuke
January 22, 2023
講義説明でもあるように存在は知っているけどどこから手を付けていいのか分からない人、特に日本人であれば最初の一歩としてオススメできます。
基本的な作法を網羅できます。
プログラミング界隈あるあるですが、情報は基本的に英語で発信されています。話者および文字が全て日本語であるというだけでも日本人が最初にするには敷居がかなり下がると思います。
ただし、基礎内容をまとめているもののここあら具体的に何かする場合は別途何かを学ぶ必要があるのでその点には注意が必要です。
島津朋史
December 8, 2022
初心者には難しそうなコードや数式についても都度噛み砕いて説明していただき、擬似的にコード全体の流れを俯瞰して見ることができた。
めちゃめちゃデキる方なのにできない人の気持ちを汲んでわかるように説明できるの凄すぎて尊敬します！
上水流暁
August 22, 2022
今までUdemy講座は途中で挫折することが多く、自分にはむいてないものだと思っていました。
この講座はハンズオンで体験しつつ、説明がとても分かりやすく飽きることなく最後まで受講することができました。THREE.JS初心者にはすごくわかりやすかったです。これからTHREE.JSを極めていきたいと思います。
Ichi
July 27, 2022
3DCADなど3次元関連の仕事をしてきましたので、「Three.js入門 モダンな3Dフロントエンド技術を習得・・・」というタイトルに惹かれて受講いたしました。Web系の仕事もしておりましたので、今のJavaScript系ライブラリでここまで3D表現できるのかと驚きました。少々理解しにくい部分もありましたが、全体的に非常にわかりやすい内容でした。今後、点群データを扱うのでThree.jsでできそうな感じがして期待が高まってます。
Naomustapha
May 14, 2022
ハンズオン形式で項目ごとに新たにプロジェクトを立ち上げる講義スタイルなため、結果的に基本設定の仕方を反復練習することになり、Three.jsとはこういうものだという勝手に馴染めた気がします。
cube（立方体）という変数名で球体を作成していたり、”カギカッコ”と言いながら丸括弧を書いていたりというところはありましたが、そこは講義の本質ではないので、細けぇことはいいんだよの精神でスルーすれば大きな学びが得られると思います。
私はこの講座でThree.jsを動かす楽しさを学びました。
受講しているうちにViteに慣れるというのも嬉しい誤算でした。
山川
March 24, 2022
YouTubeでWebGLという言葉をたまたま耳にし、「面白そう！一ランク上のポートフォリオ作成がしてみたい！」という思いでこちらの講座を受講しました。Shinさんの動画はYouTubeでも拝見しており、とてもためになるTipsが多いのですが、こちらの講座も期待通りでした。完全初見でしたが、すべて終わるころには基本が身に付き、Appleの公式サイトなどで目にしていたアニメーションが動いたときは感動モノでした。引き続き勉強を継続しようと思います。
Tomonosuke
March 21, 2022
他の講師の型と比べて話されているテンションやスピード、調子が自分の感覚と合っているのか非常に聞きやすかったです。内容がちゃんと頭に入ってきて、スムーズに理解できました。
ありがとうございました。バイバイ。
Yuk
January 28, 2022
Three.jsに関する入門者向けのわかりやすい情報を探していたので、本当に助かりました。
基本から丁寧に解説されていて、すっかり忘れていた高校数学の知識も補足してくださっていて、これが知りたかったという内容でした。
回転や動きの基礎も学べたので、講座で学んだ内容やThree.jsのサンプルを参考にして色々と触ってみます。
少しだけ残念だったのが、画面表示を二分割にしている際に一部コードが隠れて見えない瞬間があるのでデフォルトで折返し表示にしてほしかったです（それか二分割は必要なときだけにしてほしかったかも）
ただ内容に関しては、まさに学びたかったことが詰まっていて助かりました。
WebGLを活用したWebサイトの作り方が知りたくて悩んでいたので、また関連の講座など作って下さると嬉しいです。
Charts
Price
Rating
Enrollment distribution
Related Topics
4399546
udemy ID
11/16/2021
course created date
1/1/2022
course indexed date
Bot
course submited by