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

three.js基礎

E63c0cf4a77b1799e02f97689db83d91?s=47 kaidouji85
November 18, 2017

 three.js基礎

秋のJavaScript祭 in mixi 2017発表資料

E63c0cf4a77b1799e02f97689db83d91?s=128

kaidouji85

November 18, 2017
Tweet

More Decks by kaidouji85

Other Decks in Technology

Transcript

  1. UISFFKTجૅ  ळͷ+BWB4DSJQUࡇJONJYJ ஛಺ɹ༎հ

  2. ࣗݾ঺հ ஛಺༎հ ϓϩάϥϚʔ΍ͬͯ·͢ +4େ޷͖Ͱ͢

  3. ΞδΣϯμ UISFFKTͱ͸ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ

  4. ΞδΣϯμ UISFFKTͱ͸ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ

  5. UISFFKTͱ͸ ϒϥ΢βͰ%͕ൺֱత༰қʹ࢖͑ΔϥΠϒϥϦ ྺ࢙͕௕͍ͷͰɺ৘ใ͕ൺֱతଟ͍ ·ͣ͸؆୯ͳαϯϓϧΛݟͯ·͠ΐ͏

  6. αϯϓϧ ެࣜνϡʔτϦΞϧͷIFMMPXPSME<>

  7. 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();
  8. Կ͜Ε ҙຯ෼͔Μͳ͍

  9. େৎ෉Ͱ͢

  10. UISFFKTಛ༗ͷ֓೦

  11. ήʔϜϧʔϓ

  12. ͜ΕΛ஌Βͳ͍͔Β ೉͘͠ݟ͑Δ͚ͩ

  13. ΞδΣϯμ UISFFKTͱ͸ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT

  14. ໰୊ ઌ΄Ͳͷശ͕ճ͍ͬͯΔαϯϓϧͰ͸ɺ
 Կݸͷ֓೦͕͋ΔͰ͠ΐ͏͔ʁ

  15. ਖ਼ղ͸ݸͰ͢ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  16. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  17. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  18. 3FOEFS ϒϥ΢βʹ%ը໘Λඳը͢Δ΋ͷ 3FOEFS͸ҎԼύϥϝʔλͰ%ඳը͠·͢ 4DFOF %෺ମ͕ஔ͔Ε͍ͯΔੈք  $BNFSB 3FOEFSΛࣸਅʹྫ͑Δͱ෼͔Γ΍͍͢Ͱ͢

  19. 3FOEFS 4DFOF $BNFSB

  20. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  21. $BNFSB %ۭؒΛࡱӨ͢ΔΧϝϥͰ͢ ݱ࣮ͷΧϝϥಉ༷ɺ༻్ʹԠͯ͡৭ʑͳ΋ͷ͕
 ͋Γ·͢ αϯϓϧίʔυͰ͸1FSTQFDUJWF$BNFSB<>
 ಁࢹ౤ӨΧϝϥ Λ࢖͍ͬͯ·͢

  22. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  23. 4DFOF %ϞσϧɺޫݯͳͲΛ഑ஔ͢Δ΋ͷͰ͢ %ۭؒͷੈքͦͷ΋ͷͰ͢

  24. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  25. .FTI %ۭؒʹ഑ஔ͢Δ෺ମͰ͢ ΩϟϥΫλʔɺՈɺϏϧͳͲͷഎܠͳͲ͕
 .FTIʹ֘౰͠·͢

  26. .FTI (FPNFUSZ .BUFSJBM ܗঢ় ɹ৭ ɹࡐ࣭ ɹςΫενϟ

  27. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  28. (FPNFUSZ ෺ମͷܗঢ়σʔλ αϯϓϧϓϩάϥϜͰ͸ཱํମΛ࢖͍ͬͯΔ ଞʹ΋ฏ໘ɺٿମͳͲجຊతͳܗ͕
 ༻ҙ͞Ε͍ͯΔ

  29. UISFFKTͷओͳ໾ऀ 3FOEFS 4DFOF $BNFSB (FPNFUSZ .FTI .BUFSJBM

  30. .BUFSJBM ෺ମͷࡐ࣭ΛܾΊΔ΋ͷ ৭ɺޫͷ൓ࣹ۩߹ɺෆಁ໌౓ͳͲΛઃఆͰ͖Δ ςΫενϟͷઃఆΛ͢Δ΋ͷ͜͜

  31. ΞδΣϯμ UISFFKTͱ͸ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ

  32. ήʔϜϧʔϓͱ͸ ήʔϜը໘ΛΞχϝʔγϣϯͤ͞Δ࢓૊Έ ήʔϜը໘͸ύϥύϥອըͷཁྖͰɺ
 ΞχϝʔγϣϯΛ͍ͯ͠Δ ύϥύϥອըΛϓϩάϥϜͰ࠶ݱ͢Δͱɺ
 ແݶϧʔϓʹͳΔ

  33. SFRVFTU"OJNBUJPO'SBNF ϒϥ΢βͰήʔϜϧʔϓΛ࣮ݱ͢Δͱ͖ʹ
 ࢖͏ؔ਺<> ಈ͖ͱͯ͠͸ɺϒϥ΢βը໘࠶ඳըલʹ
 ొ࿥ͨ͠ίʔϧόοΫؔ਺ΛݺͿͱݴ͏΋ͷ

  34. ήʔϜϧʔϓ࣮ݱํ๏ 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͕ݺ͹ΕΔ ᶃʹ໭Δ
  35. Ҏ্Λ౿·্͑ͨͰ αϯϓϧίʔυΛݟ·͢

  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. 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(); ήʔϜϧʔϓ
  39. ΞδΣϯμ UISFFKTͱ͸ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ

  40. ࠓ೔঺հ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏

  41. 5JQT࡞ྫ ൃදऀͷझຯϓϩάϥϜ<>

  42. ࠓ೔঺հ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏

  43. ςΫενϟΞχϝͱ͸ ಡΜͰࣈͷ͝ͱ͘ɺςΫενϟΛ
 Ξχϝʔγϣϯͤ͞Δ͜ͱ εϓϥΠτΩϟϥΫλʔͷΞχϝʔγϣϯɺ
 ը໘ΤϑΣΫτͳͲʹ࢖༻͞Ε͍ͯΔ

  44. ςΫενϟΞχϝʹ ඞཁͳ͜ͱ

  45. ඞཁͳ৔ॴΛ੾ΓऔΔ

  46. ϑϨʔϜ੍ޚ

  47. ςΫενϟΞχϝ࣮ݱํ๏ ඞཁͳ৔ॴΛ੾ΓऔΔ
 ˠUISFFKTଆͰ͋ΔઃఆΛ͢Δ<> ϑϨʔϜ੍ޚ
 ˠUXFFOKTΛ࢖͏<>

  48. ςΫενϟΛը૾ϧʔϓλΠϓʹઃఆ ॎɺԣͷഒ཰ΛʮΞχϝίϚ਺ʯʹઃఆ ඳըελʔτҐஔΛௐ੔ͯ͠ɺ೚ҙϑϨʔϜΛදࣔ ԣഒ཰ ॎഒ཰ Φϑηοτ9 Φϑηοτ:

  49. UXFFOKTͱ͸ ͋Δ஋ΛYʙYʹZඵͰมԽͤ͞Δɺ
 ͱ͍͏ॲཧΛߦ͏΋ͷ DSFBUFKTͷϑϨʔϜ੍ޚػೳΛɺผϥΠϒϥϦ ͱͯ͠੾Γग़ͨ͠΋ͷ

  50. ࠓ೔঺հ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏

  51. )6%ͱ͸ )FBE6Q%JTQMBZͷུশ ΧϝϥϨϯζʹுΓ෇͍ͯදࣔ͞ΕͯΔ΋ͷ ྫ͑͹ήʔδɺΞΠίϯͳͲ

  52. )6%࣮ݱํ๏ UISFFKTʹϨΠϠʔػೳ͸ͳ͍ %ɺ)6%ʹTDFOFɺDBNFSBΛ༻ҙ͢Δ SFOEFSͷBVUP$MFBSGBMTFʹͯ͠ɺ
 %ɺ)6%ͷॱ൪ʹϨϯμϦϯά͢Δ<>

  53. %༻4DFOF %༻$BNFSB )6%༻4DFOF )6%༻$BNFSB 3FOEFS

  54. ࠓ೔঺հ͢Δ5JQT ςΫενϟΞχϝʔγϣϯ )6%ϨΠϠ ࣗ࡞ϞσϧಡΈࠐΈํ๏

  55. UISFFKTϞσϧϑΝΠϧࣄ৘ UISFFKTઐ༻ϞσϧϑΝΠϧͱͯ͠ɺ
 KTPOܗࣜͷ΋ͷ͕͋Δ UISFFKTଆͰNFUBTFRVPJBɺNNEΛಡΈࠐΉ
 ϓϥάΠϯ͕͋Δ ݸਓతʹ͸ϓϥάΠϯແ͠ͰಡΈࠐΊΔͷͰɺ KTPOϑΝΠϧͷํ͕޷͖

  56. ઐ༻KTPOϑΝΠϧʹ͍ͭͯ NFUBTFRVPJBͩͱඪ४ͰKTPOΤΫεϙʔτʹ
 ରԠ͍ͯ͠Δ ҆ఆ͍ͯ͠Δ͕ɺςΫενϟ্͕ԼٯʹͳΔ
 ෆ۩߹͕͋Δ

  57. .FUBTFRVPJB UISFFKT ࣮ࡍͷ঱ঢ়

  58. ෆ۩߹ͷճආࡦ ը૾ϑΝΠϧΛ্Լɺࠨӈٯʹ͢Ε͹
 ໰୊ͳ͘දࣔͰ͖·͢ .FUBTFRVPJBެࣜ##4Ͱ࣭໰ͨ͠Βɺ
 ˢͷΑ͏ͳճ౴Λ௖͖·ͨ͠

  59. ΞδΣϯμ UISFFKTͱ͸ UISFFKTಛ༗ͷ֓೦ ήʔϜϧʔϓ UJQT ·ͱΊ

  60. ·ͱΊ UISFFKTͱ͸ϒϥ΢βͰ%දݱΛ͢ΔͨΊͷ
 ϥΠϒϥϦͰ͋Δ ·ͣ͸UISFFKTͷ໾ऀɺήʔϜϧʔϓʹ͍ͭͯ
 ཧղ͠Α͏ ςΫενϟΞχϝɺ)6%ɺࣗ࡞ϞσϧऔΓࠐΈ Λͯ͠ɺ࡞඼ʹ՚Λఴ͑Α͏

  61. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠

  62. ࢀߟจݙ <>UISFFKTެࣜνϡʔτϦΞϧ
 IUUQTUISFFKTPSHEPDTJOEFYIUNMNBOVBM JOUSPEVDUJPO$SFBUJOHBTDFOF <>1FSTQFDUJWF$BNFSB
 IUUQTXXXBUXJLJKQUISFFKTQBHFT IUNM

  63. ࢀߟจݙ <>XJOEPXSFRVFTU"OJNBUJPO'SBNF
 IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC "1*8JOEPXSFRVFTU"OJNBUJPO'SBNF <>UJQT࡞ྫ
 IUUQTHPPHMEOZ23#

  64. ࢀߟจݙ <>ςΫενϟΞχϝͷઃఆ
 IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFFKTCMPC CDCFDFGDFFBDCF TSDUFYUVSFUFYUVSFBOJNBUJPOKT <>UXFFOKT࢖༻ྫ
 IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFFKTCMPC CDCFDFGDFFBDCF TSDBSNEP[FSTIJOCSFBWFSKT

  65. ࢀߟจݙ <>)6%ϨΠϠ࣮ݱํ๏
 IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFF KTCMPC CDCFDFGDFFB DCFTSDCBUUMFJOEFYKT