​​2017/03/12 Three.js Hands-on for beginners
​​この資料のURL
​​http://bit.ly/ThreejsHO
​​
​​
​​

​​目的

  • ​​Three.jsを使って（使わなくてもいいけど）気軽にWebGLのコンテンツを作るキッカケにしてもらう
  • ​​WebGLへの「難しそう」感を取り払う
​​
​​
​​

​​もくじ

​​
  • ​​Three.jsをさわりながら、体験してもらう（ハンズオン）
  • ​​Three.jsの簡単な説明
  • ​​実例を紹介して、もくもくタイムに何を作るかのヒントにしてもらえば
  • ​​もくもくタイム→もくもく発表タイム
​​
​​
​​

​​自己紹介

​​
 
User-uploaded image: icon.jpg

​​@mattari_panda

​​都内でWebのエンジニアをやっています。
​​主にフロントが得意ですが、PHPとかUnityとかも。
​​HTML5カンファレンスでもThree.js実例を紹介しました。
​​
​​WebGLをWeb制作にもっと普及させたい！
​​
​​

​​Three.jsとは

​​もっともメジャーなWebGLのライブラリです。
​​公式ページを見ると、いろんなデモがあり難しく見えるかもしれません。
​​（Three.jsはいろんなことができるライブラリなので）
​​
​​まずはThree.jsでの最も簡単な構成で作っていきます。
​​
​​実際に表示するところまでできてから、詳しく解説していきますので、
​​半角全角、大文字小文字に注意しながらコードを書いていきましょう
​​
​​

​​Three.jsでもっともシンプルな構成とは？

  1. ​​Scene(シーン)
  1. ​​Camera(カメラ)
  1. ​​Mesh(メッシュ)
  1. ​​Renderer(レンダラ)
​​
​​最も単純な構成はこの4つです。
​​