Understanding three.js (r75)

my talk at three.js handson at http://connpass.com/event/25563/

Transcript

1. Presented by Akihiro Oyamada (@yomotsu) Mar 27, 2016 Understanding three.js
2. Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu
3. • Low-level JS API • Based on OpenGL ES 2.0 • 3D and 2D graphics • Immediate-mode API 8FC(-
4. • Middle-level library • Most popular WebGL library • Strong community UISFFKT
5. http://fr.special-t.com/media/ogreen/en/
6. https://lightsaber.withgoogle.com/
7. http://www.shapespark.com/
8. http://www.xavigimenez.net/bcn-commercial-footprints/
9. http://www.apple.com/jp/macbook/design/
10. https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
11. https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
12. https://developer.mozilla.org/en/docs/Games/Techniques/
13. https://developer.mozilla.org/en/docs/Games/Techniques/
14. https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
15. https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
16. Downloading the lib 16
17. • 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)
18. Hello World in three.js 18
19. 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;
20. 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;
21. 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;
22. 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;
23. //シーンを設定 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要素直下の子要素としてレンダラーを追加
24. //シーンを設定 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要素直下の子要素としてレンダラーを追加
25. //シーンを設定 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要素直下の子要素としてレンダラーを追加
26. //シーンを設定 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要素直下の子要素としてレンダラーを追加
27. //シーンを設定 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要素直下の子要素としてレンダラーを追加
28. //シーンを設定 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要素直下の子要素としてレンダラーを追加
29. //シーンを設定 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要素直下の子要素としてレンダラーを追加
30. //シーンを設定 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要素直下の子要素としてレンダラーを追加
31. 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 の立方体のジオメトリーを設定
32. 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 の立方体のジオメトリーを設定
33. 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 の立方体のジオメトリーを設定
34. 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 );
35. 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 );
36. 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 );
37. 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 );
38. 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 );
39. //光源をシーンに追加 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 ); } );
40. //光源をシーンに追加 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 ); } );
41. //光源をシーンに追加 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 ); } );
42. //光源をシーンに追加 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 ); } );
43. //光源をシーンに追加 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 ); } );
44. MeshBasic
 Material MeshLambert
 Material MeshPhong
 Material MeshStandard Material MeshNormal
 Material
45. //光源をシーンに追加 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 ); } );
46. //光源をシーンに追加 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 ); } );
47. //光源をシーンに追加 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 ); } );
48. //光源をシーンに追加 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 ); } );
49. //光源をシーンに追加 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 ); } );
50. //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加 scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );
53. scene.add( cubeMesh ); //レンダリング renderer.render( scene, camera ); } );
54. scene.add( cubeMesh ); //レンダリング var anim = function () { requestAnimationFrame( anim ); cubeMesh.rotation.y += THREE.Math.degToRad( 1 ); renderer.render( scene, camera ); }; anim(); } );
55. More examples & Docs 55 http://threejs.org/
56. http://threejs.org/examples/
57. gl.finish(); @yomotsu