この記事のポイント
- three.jsを使ってブラウザ上で3D描画ができるようになる勉強会の記録記事です。
- WebGLの基礎からthree.jsの導入・アニメーション作成まで学べる内容です。
- ※この記事は過去に開催された勉強会の記録です。現在の開催状況はお問い合わせください。
ITエンジニアを目指す就活生へ
エンジニア就活に無料登録しよう
まずは会員登録からはじめてみましょう。
ブラウザで3D描画をするthree.js
3D画像を描画してブラウザに表示したい。そんなときの王道はWebGLとthree.jsを使う方法です。WebGLは特別なプラグインなしで、標準的なウェブブラウザで3Dグラフィックスを表示するためのAPIです。three.jsはJavaScriptライブラリで、単体では使いにくいWebGLを使って簡単に3D描画できるようにしてくれます。近年はWebアプリやゲーム、DX(デジタルトランスフォーメーション:業務や事業をデジタル技術で変革すること)推進の文脈でも3D表現の需要が高まっており、three.jsはフロントエンドエンジニアの注目スキルの一つです。
WebGLから直接描画をしようとすると、単純な立方体でもかなり多くのコード量が必要になってしまいますが、three.jsライブラリを使えば、WebGLで行う作業がたくさんライブラリ化されており、かなり簡潔にそして簡単に描画機能を使うことができるようになります。

three.jsで紹介されているhttp://carvisualizer.plus360degrees.com/classics/での使用例。3Dで車が表現されており、視点を変えたりできます。
もっと凝ったサイトを作りたい。Webデザインを極めたい。そんな人は是非勉強会に参加してthree.jsを自分の技術にしましょう。
少人数制・プロ講師によるthree.js勉強会で実践スキルを習得しよう
他のプログラミング学習者、そして教えてくれる人がいる勉強会は上達にとても役立ちます。ぜひこの機会に自分のスキルアップをしてみませんか?
実際の勉強会の様子(動画はAndroidアプリ勉強会)です。講師と一緒にコーディングを行っていきます。
勉強会概要
【コンテンツ】
- WebGLの呼び出し方
- three.jsの導入
- シーン、カメラ、光源、物体の作成
- 描画レンダリング
- アニメーションの作成
※内容は変更する場合がございます。あらかじめご了承ください。
【定員】
最大10名
※学生限定となります
※応募者多数の場合は抽選とさせていただきます
【日時】
随時開催中
【場所】
東京都千代田区一番町17-6 一番町MSビル2F
【参加費用】
無料
【持ち物】
WindowsPC または MacPC
よくある質問
Q. three.jsとWebGLの違いは何ですか?
WebGLはブラウザ上で3Dグラフィックスを描画するための低レベルAPIです。three.jsはそのWebGLをラップしたJavaScriptライブラリで、複雑なコードを書かずに簡単に3D描画を実現できます。初学者にはthree.jsから学ぶのがおすすめです。
Q. three.js勉強会に参加するために必要なスキルはありますか?
基本的なHTMLとJavaScriptの知識があれば参加できます。WebGLやthree.jsの経験は不要です。講師やチューターが丁寧にサポートするため、プログラミング初心者でも安心して学べます。
Q. 勉強会はオンラインでも参加できますか?
現在の開催形式については、お問い合わせフォームよりご確認ください。エンジニア就活では随時勉強会を開催しており、スキルアップの機会を提供しています。
3Dスキルをキャリアに活かそう
ITエンジニア志望の就活生はこちら
まずは無料会員登録で求人をチェックしてみましょう。
編集後記
就活でWebフロントエンドへの熱意をアピールしたい方は、ぜひ3D表現にも挑戦してみてください。
編集者
エンジニア就活
ITエンジニアを目指す就活生に向けて、求人情報・選考ノウハウ・業界研究など実践的なコンテンツを届けています。
就活生の疑問や不安に寄り添いながら、日々コンテンツを更新しています。



![[プログラミング入門編][無料勉強会]CakePHPでつくる簡易Webアプリケーション](https://d27vb9sappzlhp.cloudfront.net/column/wp-content/uploads/2014/10/engineer-shukatu-study-cakephp-200x125.jpg)

![[プログラミング入門編][無料勉強会]CoffeeScript入門](https://d27vb9sappzlhp.cloudfront.net/column/wp-content/uploads/2014/09/es_069-200x125.png)
![[プログラミング入門編][無料勉強会]Docker入門](https://d27vb9sappzlhp.cloudfront.net/column/wp-content/uploads/2014/09/es_0821-200x125.png)
![[ハッカソン]iPhoneアプリを作ろう!](https://d27vb9sappzlhp.cloudfront.net/column/wp-content/uploads/2014/08/es_0301-200x125.png)
![[ハッカソン]Androidアプリを作ろう!](https://d27vb9sappzlhp.cloudfront.net/wp-content/uploads/2014/08/es_androidApp-200x125.png)
![[プログラミング入門編][無料勉強会]24時間でJavaを使ったAndroidアプリを制作しよう!](https://d27vb9sappzlhp.cloudfront.net/column/wp-content/uploads/2014/06/engineer_shukatu_android_01-200x125.png)
![[プログラム入門編][無料勉強会]JavaScriptでアプリを制作してみよう](https://d27vb9sappzlhp.cloudfront.net/column/wp-content/uploads/2014/07/es_001-200x125.png)