Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【Three.js入門】ワンランク上のウェブサイトを作れるようになろう!
Rating: 4.1 out of 5(48 ratings)
487 students

【Three.js入門】ワンランク上のウェブサイトを作れるようになろう!

ビジュアルを引き立たせる、螺旋状に動く画像と3Dモデルを配置したウェブサイトをHTML・TypeScriptで作る方法を解説します。(サンプルファイル付き)
Last updated 7/2022
Japanese

What you'll learn

  • ThreeJsの基本
  • ThreeJsを使った3Dウェブサイトの開発
  • 3Dの分野で利用されている数学的知識
  • 螺旋の生成と変形
  • 無限スクロール
  • 慣性
  • マウスによる操作
  • 線形補完
  • VerticalFovとHorizontalFovの変換

Course content

3 sections22 lectures1h 54m total length
  • 本講座で学ぶこと0:43
  • サンプルファイルの使い方2:33

Requirements

  • HTMLの基本
  • CSSの基本
  • TypeScriptの基本(JavaScript+型がわかれば大丈夫です)
  • npmの基本(使い方程度がわかれば大丈夫です)
  • Nodejsを使用します(講座で使用しているバージョンは16.14.0)
  • Visual Studio Codeを使用します

Description

人の目を引き付ける、ワンランク上のフロントエンドの技術を学びたい方向けのコースです。


「ワードプレスはできるようになったけど、できる人が多すぎる」

「他の人ができない技術を身につけたい」

「Three.jsは聞いたことがあるけど、触ったことがない」

「より高価な企業案件を受けれる技術が欲しい」

上記に当てはまる方へは特にお勧めです。


【本コースのゴール】

今回は螺旋状に画像と3Dモデルを配置するプログラム書くをゴールとし、 ワンランク上のウェブサイト実装をThree.jsで体験しましょう。


【講座の内容 / 進め方】

・数学が苦手でもOK

簡単な数学の計算を交えて実装していきます


・解説を聞き、まずは簡単な描画するところからスタートしましょう

サンプルファイルも用意しています


・動画を見るだけでもOK(ざっくりと設定のイメージを掴むための視聴として)

ご自身の環境で試すことができると、さらに理解は深まります


【この講座で実装するプログラム】

・螺旋の自動回転

・マウスによる回転

・上下の無限スクロール

・3D空間上のアイテムの選択・拡大

・ズームアニメーション

などなど解説しています。


【注意点】

※字幕機能は自動で付与されております。必要に応じてOFFにしてください。

※HTML/CSS/TypeScript の使い方そのものは説明致しませんので、ご注意ください。


ご興味が湧いた方は、下のカリキュラムやプレビュー動画もご覧ください。

実際にコースでお会いできることを楽しみにしています。

Who this course is for:

  • ワードプレス以上のウェブ開発の技術を学びたい人
  • 高価な企業案件を受けたい人
  • ThreeJsを学びたい人
  • ポートフォリオに入れる完成品が欲しい人