three.js基礎

秋のJavaScript祭 in mixi 2017発表資料

Transcript

1. UISFFKTجૅ 
   ळͷ+BWB4DSJQUࡇ
   JO
   NJYJ
   
   ஛಺ɹ༎հ
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%ͱ͸ )FBE
    6Q
    %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