Upgrade to Pro — share decks privately, control downloads, hide ads and more …

thrree.js入門

 thrree.js入門

E63c0cf4a77b1799e02f97689db83d91?s=128

kaidouji85

June 16, 2017
Tweet

More Decks by kaidouji85

Other Decks in Technology

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ͰIFMMPXPSME ཱํମΛදࣔ͢ΔϓϩάϥϜΛ࡞Γ·͢ ιʔε͸ͪ͜Βʹ͋Γ·͢
 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ͱ͸ ੵΈ໦ײ֮Ͱ%Ϟσϧ͕࡞ΕΔιϑτ ࠷ॳ͔Β༻ҙ͞Ε͍ͯΔύʔπ͕ଟͯ͘ɺ
 ૉਓͰ΋ͦΕͬΆ͍ͷ͕࡞ΕΔ ެࣜαΠτʹ௥Ճύʔπ͕͋ΔͷͰɺ
 શ෦ೖΕͨํ͕͍͍ ࡞ྫͷϩϘοτ͸͜ΕͰ࡞Γ·ͨ͠

  69. None
  70. None
  71. None
  72. ૉਓͰ΋ ͜Ε͚ͩͷ΋ͷ͕ ࡞Ε·͢

  73. %PHB஫ҙ఺ ͍ΘΏΔϩʔϙϦϞσϧͰ͸ͳ͍ͷͰɺ
 ήʔϜͰͦͷ··࢖͏ʹ͸ෆ޲͖ ˢϏϧϘʔυͱͯ͠࢖͏ͳΒશવ͋Γ ϝΧܥҎ֎͸গۤ͠ख ෼͔Δਓʹ͸%PHB࢖ͬͯΔͳͱҰൃͰόϨΔ

  74. ΞδΣϯμ UISFFKTΛ࢖͏ཧ༝ UISFFKTೖ໳ %ϓϩάϥϛϯάUJQT ·ͱΊ

  75. ·ͱΊ UISFFKTͱ͸+BWB4DSJQUͰ؆୯ʹ%Λ
 ࢖͏ͨΊͷϥΠϒϥϦͰ͋Δ UISFFKTʹ͸໾ऀ͕ͨ͘͞Μ͍ΔͷͰɺ
 ·ͣ͸ͦΕΒΛҰͭҰͭཧղ͠Α͏ .FUBTFRVPJBɺ5FSSBHFOɺ%PHBͳͲͰUISFFKT ༻ͷࣗ࡞ૉࡐΛͲΜͲΜ࡞Ζ͏

  76. ͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠