WebGL 入門ハンズオンwith Three.js

面 白 法 人 カ ヤ ッ ク 技 術 部比 留 間 和 也

@edo_m18 @edom18

Unity や Web でVR コンテンツ作ってます

WebGL Tokyo Meetup を不定期で開催しています

WebVR についての記事書きました

ゴール

• WebGL を実際にやってみよう！と思ってもらうこと• WebGL を使ったコンテンツを作ろうと思ってもらうこと• WebGL をどう使ったらいいかのヒントを掴んでもらうこと

アジェンダ

• WebGL ってそもそもなんなの！？ by @doxas• Understanding Three.js by @yomotsu• Three.js を使ったハンズオン• 3D の基礎知識• チームごとで WebGL x UI のアイデア出し• もくもくタイム

いざハンズオン！

の前に、少しだけ説明

Three.js のイメージ

突然ですが質問です

映画撮影に必要なものは？

• 役者• カメラ• ライト• シーン• 再生機

• 役者• カメラ• ライト• シーン• 再生機

→ オブジェクト→ カメラ→ ライト→ シーン→ レンダラー

Three.js で考えると・・・

シーンのイメージイメージ

シーンのイメージイメージ

シーンのイメージイメージ

シーンのイメージイメージ

シーンのイメージシーン

イメージ

シーンのイメージTHREE.PerspectiveCamera

THREE.Mesh

THREE.DirectionalLight

THREE.Scene

THREE.Mesh

イメージ

Mesh

THREE.Mesh は「形」と「材質」で決まる

形 ･･･ Geometrye.g. THREE.BoxGeometry, THREE.PlaneGeometry, etc.

材質 ･･･ Materiale.g. THREE.MeshLambertMaterial, THREE.MeshPhongMaterial, etc.

おまけ

座標系を理解する

右手・左手

ベクトル

3D で言えば(x, y, z) で表される値のこと

ベクトルの加算

ベクトルの減算

ベクトルの長さ

ベクトルの正規化Normalize

ベクトルのスカラー倍