thrree.js入門

Transcript

1. UISFFKTೖ໳ 
   
   
   ϓϩάϥϛϯάੜ์ૹษڧձୈճ
   !αΠϘ΢ζגࣜձࣾ
   দࢁΦϑΟε
   ஛಺ɹ༎հ
2. ࣗݾ঺հ ஛಺ɹ༎հ
   ϓϩάϥϚʔ΍ͬͯ·͢
   +4͕େ޷͖Ͱ͢
   ϓϩੜͪΌΜՄѪ͍ʂʂ
3. দࢁͱ͍͑͹ळࢁܑఋ
4. ळࢁܑఋͱ͍͑͹ઓ؋ࡾּ
5. ࡾּ UISFF
6. ͱ͍͏༁Ͱ
   UISFFKTͷ࿩Λ͠·͢
7. ΞδΣϯμ UISFFKTΛ࢖͏ཧ༝
   UISFFKTೖ໳
   %ϓϩάϥϛϯάUJQT
   ·ͱΊ
8. ΞδΣϯμ UISFFKTΛ࢖͏ཧ༝
   UISFFKTೖ໳
   %ϓϩάϥϛϯάUJQT
   ·ͱΊ
9. UISFFKTͱ͸ +BWB4DSJQUͰ%͕؆୯ʹ࢖͑ΔΑ͏ʹͳΔ
 ϥΠϒϥϦͰ͢
   +BWB4DSJQUʹ͸8FC(-ͱ͍͏ඪ४Ͱ
 %Λѻ͏ػೳ͕͋Γ·͢
   8FC(-Λ௚઀࢖͏ͷ͸େมͰ͢
   ˢԿނ͔ͱݴ͏ͱɺͦΕ͸ʜʜ
10. 8FC(-
    㱠
    +BWB4DSJQU
11. γΣʔμʔݴޠ 8FH(-Λ࢖͏ʹ͸+BWB4DSJQUͱ͸׬શʹผͷ
 γΣʔμʔݴޠΛֶͿඞཁ͕͋Γ·͢
    +4෦෼΋ߦྻܭࢉ͕ଟͯ͘େมͰ͢ attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); }
12. UISFFKTͰָͯ͠
    8FC(-Λ࢖͍·͠ΐ͏
13. ΞδΣϯμ UISFFKTΛ࢖͏ཧ༝
    UISFFKTೖ໳
    %ϓϩάϥϛϯάUJQT
    ·ͱΊ
14. UISFFKTͰIFMMP
    XPSME ཱํମΛදࣔ͢ΔϓϩάϥϜΛ࡞Γ·͢
    ιʔε͸ͪ͜Βʹ͋Γ·͢
 IUUQTHJUIVCDPNLBJEPVKJIFMMPUISFFKT
15. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
16. Կ͜Εɺ
    ҙຯ෼͔Μͳ͍
17. େৎ෉ɺ
    %ʹ͸໾ऀ͕ଟ͍ͷͰ
    ೉͘͠ݟ͑Δ͚ͩͰ͢
18. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
19. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
20. 3FOEFS ϒϥ΢βʹ%ը໘Λඳը͢Δ΋ͷ
    3FOEFS͸ҎԼύϥϝʔλͰ%ඳը͠·͢
    4DFOF %෺ମ͕ஔ͔Ε͍ͯΔੈք
    $BNFSB
    3FOEFSΛࣸਅʹྫ͑Δͱ෼͔Γ΍͍͢Ͱ͢
21. 3FOEFS 4DFOF $BNFSB
22. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
23. $BNFSB %ۭؒΛࡱӨ͢ΔΧϝϥͰ͢
    ݱ࣮ͷΧϝϥಉ༷ɺ༻్ʹԠͯ͡৭ʑͳ΋ͷ͕
 ͋Γ·͢
    αϯϓϧίʔυͰ͸1FSTQFDUJWF$BNFSB
 ಁࢹ౤ӨΧϝϥ Λ࢖͍ͬͯ·͢
    IUUQTXXXBUXJLJKQUISFFKTQBHFT IUNM
24. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
25. 4DFOF %ϞσϧɺޫݯͳͲΛ഑ஔ͢Δ΋ͷͰ͢
    %ۭؒͷੈքͦͷ΋ͷͰ͢
26. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
27. .FTI %ۭؒʹ഑ஔ͢Δ෺ମͰ͢
    ΩϟϥΫλʔɺՈɺϏϧͳͲͷഎܠͳͲ͕
 .FTIʹ֘౰͠·͢
28. .FTI (FPNFUSZ .BUFSJBM ܗঢ় ɹ৭
    ɹࡐ࣭
    ɹςΫενϟ
29. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
30. (FPNFUSZ ෺ମͷܗঢ়σʔλ
    αϯϓϧϓϩάϥϜͰ͸ཱํମΛ࢖͍ͬͯΔ
    ଞʹ΋ฏ໘ɺٿମͳͲجຊతͳܗ͕
 ༻ҙ͞Ε͍ͯΔ
31. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM
32. .BUFSJBM ෺ମͷࡐ࣭ΛܾΊΔ΋ͷ
    ৭ɺޫͷ൓ࣹ۩߹ɺෆಁ໌౓ͳͲΛઃఆͰ͖Δ
    ςΫενϟͷઃఆΛ͢Δ΋ͷ͜͜
33. ΋͏Ұ౓αϯϓϧίʔυ ΛݟͯΈ·͠ΐ͏
34. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
35. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); UISFFKTͷ໾ऀΛ
 ॳظԽͯ͠Δ͚ͩ
36. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render();
37. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ͋ͱ͸͜ͷ෦෼͕
    Α͘෼͔Βͳ͍
38. ͜͜͸͍ΘΏΔ
    ήʔϜϧʔϓͰ͢
39. ήʔϜϧʔϓͱ͸ ήʔϜը໘ΛΞχϝʔγϣϯͤ͞Δ࢓૊Έ
    ήʔϜը໘͸ύϥύϥອըͷཁྖͰɺ
 ΞχϝʔγϣϯΛ͍ͯ͠Δ
    ύϥύϥອըΛϓϩάϥϜͰ࠶ݱ͢Δͱɺ
 ແݶϧʔϓʹͳΔ
40. SFRVFTU"OJNBUJPO'SBNF ϒϥ΢βͰήʔϜϧʔϓΛ࣮ݱ͢Δͱ͖ʹ
 ࢖͏ؔ਺
    ಈ͖ͱͯ͠͸ɺϒϥ΢βը໘࠶ඳըલʹ
 ొ࿥ͨ͠ίʔϧόοΫؔ਺ΛݺͿͱݴ͏΋ͷ
    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC "1*8JOEPXSFRVFTU"OJNBUJPO'SBNF
41. ήʔϜϧʔϓ࣮ݱํ๏ var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ᶃSFOEFSΛ࣮ߦ
    ᶄSFRVFTU"OJNBUJPO'SBNFʹSFOEFSΛొ࿥
    ᶅSFOEFSؔ਺͕ऴྃ͢Δ
    ᶆϒϥ΢β࠶ඳըલʹSFOEFS͕ݺ͹ΕΔ ᶃʹ໭Δ
42. ήʔϜϧʔϓ಺ͷॲཧ var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); ᶃ ᶄ ᶃཱํମͷYɺZ࣠ํ޲ͷճస֯Λ ͢Δ
    ᶄ%ը໘Λඳը͢Δ
43. UISFFKTجຊ·ͱΊ %ੈքͷجຊͱͳΔγʔϯɺͦͷੈքΛݟΔ
 ͨΊͷΧϝϥ
    ෺ମͰ͋Δ.FTI͸ɺܗঢ়σʔλ(FPNFUSZɺ
 ࡐ࣭σʔλ.BUFSJBM͔Β੒Δ
    ήʔϜϧʔϓͱݺ͹ΕΔύϥύϥອըͷख๏Ͱɺ ήʔϜը໘͕ಈ͍͍ͯΔΑ͏ʹݟ͑Δ
44. ৭ʑग़͖ͯ·͕ͨ͠ɺ
45. .FTI 3FOEFS 4DFOF $BNFSB (FPNFUSZ .BUFSJBM ·ͣ͸ओͳ໾ऀΛ
 ཧղ͠·͠ΐ͏
46. ΞδΣϯμ UISFFKTΛ࢖͏ཧ༝
    UISFFKTೖ໳
    %ϓϩάϥϛϯάUJQT
    ·ͱΊ
47. ͸͡Ίʹ ͔͜͜Β͸UJQTूʹͳΓ·͢
    ൃදऀ͕ࣗ࡞ήʔϜΛ࡞Δࡍʹಘͨ஌ݟΛ
 ڞ༗͠·͢
    ࠷ऴతʹ͜Ε͘Β͍͸࡞ΕΔΑ͏ʹͳΓ·͢
 IUUQTHPPHMEOZ23#
48. ࡞ྫ खલຯ઻Ͱ͕͢ʣ
49. ࡞ྫͷίʔυ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTDPNNJUTNBTUFS
50. UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ
    εΧΠϘοΫεΛ࣮ݱ͢Δ
    ࣗ࡞ϞσϧΛಡΈࠐΉ
51. UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ
    εΧΠϘοΫεΛ࣮ݱ͢Δ
    ࣗ࡞ϞσϧΛಡΈࠐΉ
52. ɹϏϧϘʔυͱ͸ ৗʹΧϝϥͷํ޲ʹදࣔ͞ΕΔɺ
 ൘ঢ়ͷΦϒδΣΫτ
    %ۭؒʹ࣍ݩը૾Λද͍ࣔͤͨ࣌͞ʹɺ
 Α͘࢖ΘΕ͍ͯ·͢
    ࡞ྫͩͱɺϩϘοτɺ໦͕ϏϧϘʔυͰ͢
    ࣮ࡏͷήʔϜͩͱɺϖʔύʔϚ˓Φ31(ɺ
 εύ˓ϘͳͲ
53. ϏϧϘʔυ࣮૷ํ๏ ϏϧϘʔυͷRVPUBOJPO ճస֯ ʹɺ
 ΧϝϥͷRVPUBOJPOΛηοτ͠·͠ΐ͏
    ˢ্هॲཧΛ΍Δͷ͸ɺήʔϜϧʔϓͷதͰ͢ mesh.quaternion.copy(camera.quaternion);
54. ΋ͬͱৄ͍͠ίʔυྫ IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTCMPCNBTUFSTSDTUBHFTDIPPMTDIPPM CVJMEUSFFCJMMCPBSEKT
55. UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ
    εΧΠϘοΫεΛ࣮ݱ͢Δ
    ࣗ࡞ϞσϧΛಡΈࠐΉ
56. εΧΠϘοΫεͱ͸ ശͷ಺ଆʹԕܠͷը૾ΛషΓ෇͚ͯɺ
 ͞΋ແݶͷੈքʹ͍ΔΑ͏ʹࡨ֮ͤ͞Δख๏
    ࡞ྫͰ͸ۭɺ஍໘ͳͲʹεΧΠϘοΫεΛ࢖༻
57. εΧΠϘοΫε࡞੒ํ๏ ԕܠը૾Λࣗ෼Ͱඳ͘ͷ͸େมͳͷͰɺ
 5FSSBHFOΛ࢖͍·͠ΐ͏
    5FSSBHFOͱ͸%Ͱ৭ʑͳ஍ܗΛ࡞Δ͜ͱ͕
 Ͱ͖ΔιϑτͰ͢
    ํ޲
    
    ্Լͷܭຕͷը૾Λ༻ҙ͠·͠ΐ͏
58. εΧΠϘοΫεը૾ྫ
59. ۩ମతͳखॱ ʮ5FSBHHFOɺεΧΠϘοΫεʯͰάάΔͱ
 ݁ߏώοτ͠·͢
    ݸਓతʹ͸ɺ͜ͷϒϩά͕Φεεϝ
    IUUQEIBUFOBOFKQ OBLBNVSB
60. UJQTҰཡ ϏϧϘʔυΛ࣮ݱ͢Δ
    εΧΠϘοΫεΛ࣮ݱ͢Δ
    ࣗ࡞ϞσϧΛಡΈࠐΉ
61. UISFFKTͷϞσϧϑΝΠϧ UISFFKTઐ༻ͷKTPOϑΝΠϧ͕͋Γ·͢
    ༗໊ͳ%ιϑτʹ͸ݢฒΈUISFFKTઐ༻KTPOΛ ॻ͖ग़͢ϓϥάΠϯ͕͋Γ·͢
    .FUBTFRVPJBɺ#MFOEFSΛࢼ͠·͕ͨ͠ɺ
 ͲͪΒ΋҆ఆ͠·ͤΜͰͨ͠
62. .FUBTFRVPJB ݴΘͣͱ஌Εͨࠃ࢈ϞσϦϯάπʔϧ
    ඪ४ͰUISFFKTઐ༻KTPOͷग़ྗʹରԠ
    ςΫενϟ্͕Լٯ͞·ʹදࣔ͞ΕΔҎ֎ɺ
 ಛʹ໰୊͸͋Γ·ͤΜͰͨ͠
63. .FUBTFRVPJB UISFFKT ࣮ࡍͷ঱ঢ়
64. ෆ۩߹ͷճආࡦ ը૾ϑΝΠϧΛ্Լɺࠨӈٯʹ͢Ε͹
 ໰୊ͳ͘දࣔͰ͖·͢
    .FUBTFRVPJBެࣜ##4Ͱ࣭໰ͨ͠Βɺ
 ˢͷΑ͏ͳճ౴Λ௖͖·ͨ͠
65. #MFOEFS ࠃࡍతʹ༗໊ͳ%ιϑτ
    ϑϦʔͳͷʹػೳ͕ϋΠΤϯυͳιϑτʹ΋
 ඖఢ͢Δ
    UISFFKTઐ༻KTPOΛॻ͖ग़͢ϓϥάΠϯ͕͋Δ
    ͕ɺͦ΋ͦ΋Ϟσϧ͕දࣔ͞Εͳ͔ͬͨ
66. ࠷ޙʹ͓·͚Ͱ
67. 1SPKFDU
    %0("
68. 1SPKFDU
    %PHB
    ͱ͸ ੵΈ໦ײ֮Ͱ%Ϟσϧ͕࡞ΕΔιϑτ
    ࠷ॳ͔Β༻ҙ͞Ε͍ͯΔύʔπ͕ଟͯ͘ɺ
 ૉਓͰ΋ͦΕͬΆ͍ͷ͕࡞ΕΔ
    ެࣜαΠτʹ௥Ճύʔπ͕͋ΔͷͰɺ
 શ෦ೖΕͨํ͕͍͍
    ࡞ྫͷϩϘοτ͸͜ΕͰ࡞Γ·ͨ͠
72. ૉਓͰ΋
    ͜Ε͚ͩͷ΋ͷ͕
    ࡞Ε·͢
73. %PHB
    ஫ҙ఺ ͍ΘΏΔϩʔϙϦϞσϧͰ͸ͳ͍ͷͰɺ
 ήʔϜͰͦͷ··࢖͏ʹ͸ෆ޲͖
    ˢϏϧϘʔυͱͯ͠࢖͏ͳΒશવ͋Γ
    ϝΧܥҎ֎͸গۤ͠ख
    ෼͔Δਓʹ͸%PHB࢖ͬͯΔͳͱҰൃͰόϨΔ
74. ΞδΣϯμ UISFFKTΛ࢖͏ཧ༝
    UISFFKTೖ໳
    %ϓϩάϥϛϯάUJQT
    ·ͱΊ
75. ·ͱΊ UISFFKTͱ͸+BWB4DSJQUͰ؆୯ʹ%Λ
 ࢖͏ͨΊͷϥΠϒϥϦͰ͋Δ
    UISFFKTʹ͸໾ऀ͕ͨ͘͞Μ͍ΔͷͰɺ
 ·ͣ͸ͦΕΒΛҰͭҰͭཧղ͠Α͏
    .FUBTFRVPJBɺ5FSSBHFOɺ%PHBͳͲͰUISFFKT ༻ͷࣗ࡞ૉࡐΛͲΜͲΜ࡞Ζ͏
76. ͝੩ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠