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

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

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

E63c0cf4a77b1799e02f97689db83d91?s=128

kaidouji85

May 19, 2018
Tweet

More Decks by kaidouji85

Other Decks in Technology

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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠