ブラウザで3D描画をするthree.js
3D画像を描画してブラウザに表示したい。そんなときの王道はWebGLとthree.jsを使う方法です。WebGLは特別なプラグインなしで、標準的なウェブブラウザで3Dグラフィックスを表示するためのAPIです。three.jsはJavaScriptライブラリで、単体では使いにくいWebGLを使って簡単に3D描画できるようにしてくれます。
WebGLから直接描画をしようとすると、単純な立方体でもかなり多くのコード量が必要になってしまいますが、three.jsライブラリを使えば、WebGLで行う作業がたくさんライブラリ化されており、かなり簡潔にそして簡単に描画機能を使うことができるようになります。
three.jsで紹介されているhttp://carvisualizer.plus360degrees.com/classics/での使用例。3Dで車が表現されており、視点を変えたりできます。
もっと凝ったサイトを作りたい。Webデザインを極めたい。そんな人は是非勉強会に参加してthree.jsを自分の技術にしましょう。
講師の方はエンジニア就活が厳選した、プログラマーとしての実務経験が豊富なプロの方です!また勉強会は少人数で行ううえに、チューターもいるのでわからないことがあっても気軽に質問できる環境です
他のプログラミング学習者、そして教えてくれる人がいる勉強会は上達にとても役立ちます。ぜひこの機会に自分のスキルアップをしてみませんか?
実際の勉強会の様子(動画はAndroidアプリ勉強会)です。講師と一緒にコーディングを行っていきます。
勉強会概要
【コンテンツ】
- WebGLの呼び出し方
- three.jsの導入
- シーン、カメラ、光源、物体の作成
- 描画レンダリング
- アニメーションの作成
※内容は変更する場合がございます。あらかじめご了承ください。
【定員】
最大10名
※学生限定となります
※応募者多数の場合は抽選とさせていただきます
【日時】
随時開催中
【場所】
東京都千代田区一番町17-6 一番町MSビル2F
【参加費用】
無料
【持ち物】
WindowsPC または MacPC