Tweet
Tweet

Slide 1

Slide 1 text

Presented by Akihiro Oyamada (@yomotsu) Mar 27, 2016 Understanding three.js

Slide 2

Slide 2 text

Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu

Slide 3

Slide 3 text

• Low-level JS API • Based on OpenGL ES 2.0 • 3D and 2D graphics • Immediate-mode API 8FC(-

Slide 4

Slide 4 text

• Middle-level library • Most popular WebGL library • Strong community UISFFKT

Slide 5

Slide 5 text

http://fr.special-t.com/media/ogreen/en/

Slide 6

Slide 6 text

https://lightsaber.withgoogle.com/

Slide 7

Slide 7 text

http://www.shapespark.com/

Slide 8

Slide 8 text

http://www.xavigimenez.net/bcn-commercial-footprints/

Slide 9

Slide 9 text

http://www.apple.com/jp/macbook/design/

Slide 10

Slide 10 text

https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf

Slide 11

Slide 11 text

https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf

Slide 12

Slide 12 text

https://developer.mozilla.org/en/docs/Games/Techniques/

Slide 13

Slide 13 text

https://developer.mozilla.org/en/docs/Games/Techniques/

Slide 14

Slide 14 text

https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx

Slide 15

Slide 15 text

https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx

Slide 16

Slide 16 text

Downloading the lib 16

Slide 17

Slide 17 text

• GitHub Repo •http://threejs.org/ • NPM •$ npm install —save three • CDN •https://cdnjs.com/libraries/three.js/ •https://developers.google.com/speed/libraries/#threejs (old)

Slide 18

Slide 18 text

Hello World in three.js 18

Slide 19

Slide 19 text

window.addEventListener( 'DOMContentLoaded', function () { //描画領域の大きさに利用する var width = window.innerWidth; var height = window.innerHeight; //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2;

Slide 20

Slide 20 text

window.addEventListener( 'DOMContentLoaded', function () { //描画領域の大きさに利用する var width = window.innerWidth; var height = window.innerHeight; //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2;

Slide 21

Slide 21 text

window.addEventListener( 'DOMContentLoaded', function () { //描画領域の大きさに利用する var width = window.innerWidth; var height = window.innerHeight; //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2;

Slide 22

Slide 22 text

window.addEventListener( 'DOMContentLoaded', function () { //描画領域の大きさに利用する var width = window.innerWidth; var height = window.innerHeight; //シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2;

Slide 23

Slide 23 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 24

Slide 24 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 25

Slide 25 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 26

Slide 26 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 27

Slide 27 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 28

Slide 28 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 29

Slide 29 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 30

Slide 30 text

//シーンを設定 var scene = new THREE.Scene(); //カメラを設定 var fov = 80; var aspect = width / height; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加

Slide 31

Slide 31 text

var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定

Slide 32

Slide 32 text

var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定

Slide 33

Slide 33 text

var camera = new THREE.PerspectiveCamera(fov,aspect,near,far); //カメラの位置を手前に10移動 camera.position.z = 2; //レンダラーを設定 var renderer = new THREE.WebGLRenderer(); //レンダラーのサイズは当初設定したwidthとheightと同じに renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定

Slide 34

Slide 34 text

renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh );

Slide 35

Slide 35 text

renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh );

Slide 36

Slide 36 text

renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh );

Slide 37

Slide 37 text

renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh );

Slide 38

Slide 38 text

renderer.setSize( width, height ); //HTMLのbody要素直下の子要素としてレンダラーを追加 document.body.appendChild( renderer.domElement ); //光源を設定 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0, 1 ); //光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh );

Slide 39

Slide 39 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 40

Slide 40 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 41

Slide 41 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 42

Slide 42 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 43

Slide 43 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 44

Slide 44 text

MeshBasic
 Material MeshLambert
 Material MeshPhong
 Material MeshStandard Material MeshNormal
 Material

Slide 45

Slide 45 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 46

Slide 46 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 47

Slide 47 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 48

Slide 48 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 49

Slide 49 text

//光源をシーンに追加 scene.add( directionalLight ); //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); //マテリアルを設定 var material = new THREE.MeshPhongMaterial({color:0x660000}); //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 50

Slide 50 text

//メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );

Slide 54

Slide 54 text

scene.add( cubeMesh ); //レンダリング var anim = function () { requestAnimationFrame( anim ); cubeMesh.rotation.y += THREE.Math.degToRad( 1 ); renderer.render( scene, camera ); }; anim(); } );

Slide 55

Slide 55 text

More examples & Docs 55 http://threejs.org/

Slide 56

Slide 56 text

http://threejs.org/examples/

Slide 57

Slide 57 text

gl.finish(); @yomotsu