THREE.JSハンズオン面白法人カヤック　比留間 和也

自己紹介

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

お台場合衆国 リアルスコープブース サイネージ

カヤック サイコロ給 EBICHU CUBE ルービックキューブ

THREE.JSでインタラクションを作る本題

THREE.JSとは

Three.jsWebGLを劇的に使いやすくしてくれるライブラリ

オブジェクトを表示するSTEP1

突然ですが質問です。

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

• 役者

• カメラ

• ライト

• シーン

• 再生機

• 役者

• カメラ

• ライト

• シーン

• 再生機

→オブジェクト

→カメラ

→ライト

→シーン

→レンダラー

Three.jsで考えると・・・

イメージ

イメージ

イメージ

イメージ

イメージシーン

イメージ

THREE.PerspectiveCamera

THREE.Mesh

THREE.DirectionalLight

THREE.Scene

THREE.Mesh

THREE.Mesh？

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

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

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

ハンズオンの前に補足

座標系を理解する

実際にやってみましょう

マウスでオブジェクトを選択するSTEP2

THREE.JSの世界は”3D” スクリーンは”2D”

マウスが指し示す場所はどこか

“点” ではなく ”線”

実際にやってみましょう