three.jsでレスポンシブ対応する

Transcript

1. UISFFKTͰ
 ϨεϙϯγϒରԠ͢Δ 
   ॳՆͷ+BWB4DSJQUࡇ
   JO
   αʔΩϡϨʔγϣϯϏϧ
   'PS1SP
   ஛಺ɹӈհ
2. ࣗݾ঺հ ஛಺ӈհ
   ϓϩάϥϚʔͰ͢
   +4େ޷͖
   UISFFKT͕޷͖Ͱ͢
3. ΞδΣϯμ ͸͡Ίʹ
   Ϗϡʔϙʔτͷઃఆ
   ϝσΟΞΫΤϦΛ+4Ͱ࠶ݱ
   ΢Πϯυ΢ϦαΠζରԠ
   ·ͱΊ
4. ΞδΣϯμ ͸͡Ίʹ
   Ϗϡʔϙʔτͷઃఆ
   ϝσΟΞΫΤϦΛ+4Ͱ࠶ݱ
   ΢Πϯυ΢ϦαΠζରԠ
   ·ͱΊ
5. ϨεϙϯγϒରԠͱ͸ 1$ɺϞόΠϧͳͲσόΠεʹԠͨ͡
 ݟͨ໨ʹ੾Γସ͑Δ͜ͱ
   ҰൠαΠτͰ͸ϏϡʔϙʔτɺϝσΟΞΫΤϦ
 Λઃఆ͢Ε͹͍͍
   UISFFKTͷϨεϙϯγϒରԠ͸ҰൠαΠτͱ͸ ଟগҟͳΔ
6. UISFFKTͰ
   ϨεϙϯγϒରԠ
   ͢ΔͨΊʹඞཁͳ͜ͱʜʜ
7. Ϗϡʔϙʔτ͸
   ҰൠαΠτͱಉ͡
8. ϝσΟΞΫΤϦ͸
   +BWB4DSJQUͰ࠶ݱ͢Δ
9. UISFFKTͷେલఏ େ͖͞ͷ୯Ґ͸ϐΫηϧͷΈ
   %্ۭؒͷΦϒδΣΫτʹελΠϧͷద༻
 ͸Ͱ͖ͳ͍
10. ΞδΣϯμ ͸͡Ίʹ
    Ϗϡʔϙʔτͷઃఆ
    ϝσΟΞΫΤϦΛ+4Ͱ࠶ݱ
    ΢Πϯυ΢ϦαΠζରԠ
    ·ͱΊ
11. Ϗϡʔϙʔτͱ͸ ϞόΠϧͷ৔߹ɺॎ޲͖ɺԣ޲͖Ͱυοτͷ
 େ͖͕͞มΘΔ͜ͱ͕͋Δ
    ͜ΕͩͱελΠϧௐ੔͕೉͍͠ͷͰɺ
 ޲͖ʹΑΒͣυοτͷେ͖͞ΛҰఆʹ͍ͨ͠
    ˢϏϡʔϙʔτͰ࣮ݱՄೳ
12. Ϗϡʔϙʔτͳ͠    
13. Ϗϡʔϙʔτ͋Γ    
14. Ϗϡʔϙʔτͷઃఆ ˢͷҙຯ͸ɺεϚϗͷॎɺԣͰυοτͷେ͖͞
 Λݻఆ͢Δͱ͍͏͜ͱ <meta name="viewport" content=“width=device-width,initial-scale=1”>
15. ΞδΣϯμ ͸͡Ίʹ
    Ϗϡʔϙʔτͷઃఆ
    ϝσΟΞΫΤϦΛ+4Ͱ࠶ݱ
    ΢Πϯυ΢ϦαΠζରԠ
    ·ͱΊ
16. ϝσΟΞΫΤϦͱ͸ σόΠεຖʹελΠϧΛ੾Γସ͑Δٕज़
    εΫϦʔϯ෯ɺϐΫηϧϨʔτ౳ͷ৚݅Ͱɺ
 σόΠεΛ൑ఆ͢Δ
17. ϝσΟΞΫΤϦͷྫ /* iPhone 6, 6S, 7, 8 (ϥϯυεέʔϓɺϙʔτϨʔτڞ༻) */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { .content { color: red } } /* iPhone 5, 5S, 5C and 5SE (ϥϯυεέʔϓɺϙʔτϨʔτڞ༻) */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { .content { color: blue; } }
18. +4ͰϝσΟΞΫΤϦ࠶ݱ ϝσΟΞΫΤϦͰ࢖͏৚݅͸ɺ
 +BWB4DSJQUͰ΋औಘՄೳ
    NBY999ɺNJO999ɺBOEͳͲ͸
 ࿦ཧԋࢉࢠΛ࢖͑͹࠶ݱՄೳ
19. +4ͰࢀরͰ͖Δ΋ͷ ύϥϝʔλ +BWB4DSJQU εΫϦʔϯ෯ TDSFFOXJEUI εΫϦʔϯߴ TDSFFOIFJHIU ϐΫηϧϨʔτ XJOEPXEFWJDF1JYDFM3BUJP
20. +4ϝσΟΞΫΤϦม׵ྫ if ( 375 <= screen.width && screen.width <= 667 && window.devicePixelRatio === 2 ) { // σόΠεຖͷઃఆΛॻ͘ } @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { .content { color: red } } +BWB4DSJQU ϝσΟΞΫΤϦ
21. ΋ͬͱ؆୯ͳํ๏ // @flow /** ήʔδΛ౳ഒදࣔ͢ΔͨΊʹ࠷௿ݶඞཁͱͳΔը໘෯ */ const MIN_SCREEN_WIDTH = 524; /** * σόΠεʹԠͨ͡ήʔδܥήʔϜΦϒδΣΫτͷഒ཰Λฦ͢ * ϙʔτϨʔτɺϥϯυεέʔϓͰഒ཰Λม͑ΔΑ͏ͳ͜ͱ͸͠ͳ͍ * ϙʔτϨʔτͰը໘෯͕࠷௿ʹͳΔͱ૝ఆ͠ɺը໘෯͕ج४஋ʹຬͨͳ͍৔߹ʹ͸ॖখදࣔ͢Δ * * @return ഒ཰ */ export function getGaugeScale(): number { const portraitScreenWidth = Math.min(screen.width, screen.height); if (portraitScreenWidth <= MIN_SCREEN_WIDTH) { return portraitScreenWidth / MIN_SCREEN_WIDTH; } return 1; }
22. ΞδΣϯμ ͸͡Ίʹ
    Ϗϡʔϙʔτͷઃఆ
    ϝσΟΞΫΤϦΛ+4Ͱ࠶ݱ
    ΢Πϯυ΢ϦαΠζରԠ
    ·ͱΊ
23. ΢Πϯυ΢ϦαΠζରԠ Ϩεϙϯγϒͱ͸௚઀ؔ܎ͳ͍͕ɺ
 ͜Ε͚ͩͰ͸΢Πϯυ΢ϦαΠζʹඇରԠ
    ΧϝϥͷύʔεϖΫςΟϒɺϨϯμϥͷαΠζ
 Λ΢Πϯυ΢ϦαΠζຖʹ࠶ઃఆ͢Ε͹0,
24. 1FSTQFDUJWF$BNFSB // @flow import * as THREE from “three"; /** * ΢Πϯυ΢ϦαΠζʹԠͯ͡ɺPerspectiveCameraͷ֤छύϥϝʔλΛߋ৽͢Δ * ຊؔ਺ʹ͸෭࡞༻͕͋Δ * * @param camera ߋ৽ର৅ͷΧϝϥ */ export function onResizePerspectiveCamera(camera: THREE.PerspectiveCamera): void { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }
25. 0SUIPHSBQIJD$BNFSB // @flow import * as THREE from “three"; /** * ΢Πϯυ΢ϦαΠζʹԠͯ͡ɺOrthographicCameraͷ֤छύϥϝʔλΛߋ৽͢Δ * ຊؔ਺ʹ͸෭࡞༻͕͋Δ * * @param camera ߋ৽ର৅ͷΧϝϥ */ export function onResizeOrthographicCamera(camera: THREE.OrthographicCamera): void { camera.left = -window.innerWidth/2; camera.right = window.innerWidth/2; camera.top = window.innerHeight/2; camera.bottom = -window.innerHeight/2; camera.updateProjectionMatrix(); }
26. Ϩϯμϥ // @flow import * as THREE from 'three'; /** * ϨϯμϥαΠζΛ΢Πϯυ΢αΠζʹ߹ΘͤΔ * ຊؔ਺ʹ͸෭࡞༻͕͋Δ * * @param render Ϩϯμϥ */ export function fitToWindowSize(render: THREE.WebGLRenderer) { render.setSize(window.innerWidth, window.innerHeight); }
27. ΞδΣϯμ ͸͡Ίʹ
    Ϗϡʔϙʔτͷઃఆ
    ϝσΟΞΫΤϦΛ+4Ͱ࠶ݱ
    ΢Πϯυ΢ϦαΠζରԠ
    ·ͱΊ
28. ࢀߟࢿྉ ಈ͘΋ͷ͸͜͜Ͱެ։ͯ͠·͢
 IUUQTHPPHMEOZ23#
    ιʔείʔυ͸HJUIVCͰެ։͍ͯ͠·͢
 IUUQTHJUIVCDPNLBJEPVKJTUVEZUISFFKT
29. ·ͱΊ UISFFKTͷϏϡʔϙʔτઃఆ͸ɺ
 ҰൠαΠτͱಉ͡
    UISFFKTͰϝσΟΞΫΤϦ͸࢖͑ͳ͍ͷͰɺ
 +BWB4DSJQUͰಉ͜͡ͱΛ࠶ݱ͢Δ
    ΧϝϥɺϨϯμϥΛϦαΠζରԠͤ͞Δͱɺ
 ΑΓϋοϐʔʹͳΕΔ
30. ͝ਗ਼ௌ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠