صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
gitadmin
/
three.js
mirrorاز https://github.com/mrdoob/three.js.git
1
0
انشعاب 0
پرونده‌ها مشکلات 0 ویکی
درخت: 9af0a09049
شاخه‌ها تگ‌ها
three.js
/
manual
/
ko
/
materials.html

materials.html 21 KB
تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 
  1. <!DOCTYPE html><html lang="ko"><head>
    2. 

  2.     <meta charset="utf-8">
    3. 

  3.     <title>재질(Materials)</title>
    4. 

  4.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    5. 

  5.     <meta name="twitter:card" content="summary_large_image">
    6. 

  6.     <meta name="twitter:site" content="@threejs">
    7. 

  7.     <meta name="twitter:title" content="Three.js – 재질(Materials)">
    8. 

  8.     <meta property="og:image" content="https://threejs.org/files/share.png">
    9. 

  9.     <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    10. 

  10.     <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
    11. 

  11. 

  12.     <link rel="stylesheet" href="../resources/lesson.css">
    13. 

  13.     <link rel="stylesheet" href="../resources/lang.css">
    14. 

  14. <script type="importmap">
    15. 

  15. {
    16. 

  16.   "imports": {
    17. 

  17.     "three": "../../build/three.module.js"
    18. 

  18.   }
    19. 

  19. }
    20. 

  20. </script>
    21. 

  21.     <link rel="stylesheet" href="/manual/ko/lang.css">
    22. 

  22.   </head>
    23. 

  23.   <body>
    24. 

  24.     <div class="container">
    25. 

  25.       <div class="lesson-title">
    26. 

  26.         <h1>재질(Materials)</h1>
    27. 

  27.       </div>
    28. 

  28.       <div class="lesson">
    29. 

  29.         <div class="lesson-main">
    30. 

  30.           <p>※ 이 글은 Three.js의 튜토리얼 시리즈로서,
    31. 

  31. 먼저 <a href="fundamentals.html">Three.js의 기본 구조에 관한 글</a>을
    32. 

  32. 읽고 오길 권장합니다.</p>
    33. 

  33. <p>Three.js에는 기본으로 제공하는 재질(materials) 몇 개가 있습니다.
    34. 

  34. 재질이란, 물체가 씬(scene)에 어떤 식으로 나타날지를 결정하는 요소로서,
    35. 

  35. 어떤 재질을 사용할지는 전적으로 상황에 따라 판단해야 합니다.</p>
    36. 

  36. <p>재질의 속성(property)를 정하는 방법은 크게 두 가지로 나뉩니다. 하나는
    37. 

  37. 이전처럼 생성자를 호출할 때 값을 넘겨주는 것이고,</p>
    38. 

  38. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial({
    39. 

  39.   color: 0xFF0000,    // 빨강 (CSS처럼 문자열로 넘겨줄 수도 있음. "#ff0000")
    40. 

  40.   flatShading: true,
    41. 

  41. });
    42. 

  42. </pre>
    43. 

  43. <p>다른 하나는 생성한 뒤에 바꾸는 것이죠.</p>
    44. 

  44. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial();
    45. 

  45. material.color.setHSL(0, 1, .5);  // 빨강
    46. 

  46. material.flatShading = true;
    47. 

  47. </pre>
    48. 

  48. <p>물론 HSL 색상 모델 외에 rgb, hex 등 다양한 방법으로 색을 지정할
    49. 

  49. 수 있습니다.</p>
    50. 

  50. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">material.color.set(0x00FFFF);    // CSS의 #RRGGBB 형식
    51. 

  51. material.color.set(cssString);   /* CSS 색상 문자열, 예를 들어 'purple', '#F32',
    52. 

  52.                                   * 'rgb(255, 127, 64)',
    53. 

  53.                                   * 'hsl(180, 50%, 25%)' 등
    54. 

  54.                                   */
    55. 

  55. material.color.set(someColor)    // THREE.Color에 정의된 static 색상
    56. 

  56. material.color.setHSL(h, s, l)   // hsl 색상, 0부터 1까지
    57. 

  57. material.color.setRGB(r, g, b)   // rgb 색상, 0부터 1까지
    58. 

  58. </pre>
    59. 

  59. <p>생성시에도 hex 값 또는 CSS 문자열을 전달해도 됩니다.</p>
    60. 

  60. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000});         // 빨강
    61. 

  61. const m2 = new THREE.MeshBasicMaterial({color: 'red'});            // 빨강
    62. 

  62. const m3 = new THREE.MeshBasicMaterial({color: '#F00'});           // 빨강
    63. 

  63. const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'});   // 빨강
    64. 

  64. const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'}); // 빨강
    65. 

  65. </pre>
    66. 

  66. <p>이제 Three.js의 기본 재질을 살펴보겠습니다.</p>
    67. 

  67. <p><a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>은 광원의 영향을 받지 않습니다. <a href="/docs/#api/ko/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a>은
    68. 

  68. 정점에서만 광원을 계산하고, <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>은 픽셀 하나하나 전부 광원을
    69. 

  69. 계산합니다. 뿐만 아니라 <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>은 반사점(specular highlights, 물체가 조명을 받을 때 물체에 나타나는 밝은 점. 역주)도
    70. 

  70. 지원합니다.</p>
    71. 

  71. <div class="spread">
    72. 

  72.   <div>
    73. 

  73.     <div data-diagram="MeshBasicMaterial"></div>
    74. 

  74.     <div class="code">Basic</div>
    75. 

  75.   </div>
    76. 

  76.   <div>
    77. 

  77.     <div data-diagram="MeshLambertMaterial"></div>
    78. 

  78.     <div class="code">Lambert</div>
    79. 

  79.   </div>
    80. 

  80.   <div>
    81. 

  81.     <div data-diagram="MeshPhongMaterial"></div>
    82. 

  82.     <div class="code">Phong</div>
    83. 

  83.   </div>
    84. 

  84. </div>
    85. 

  85. <div class="spread">
    86. 

  86.   <div>
    87. 

  87.     <div data-diagram="MeshBasicMaterialLowPoly"></div>
    88. 

  88.   </div>
    89. 

  89.   <div>
    90. 

  90.     <div data-diagram="MeshLambertMaterialLowPoly"></div>
    91. 

  91.   </div>
    92. 

  92.   <div>
    93. 

  93.     <div data-diagram="MeshPhongMaterialLowPoly"></div>
    94. 

  94.   </div>
    95. 

  95. </div>
    96. 

  96. <div class="threejs_center code">같은 모델을 로우-폴리(low poly) 모델로 바꾼 것</div>
    97. 

  97. 

  98. <p><a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>의 <code class="notranslate" translate="no">shininess</code> 속성으로 반사점의 <em>밝기</em>를 조절할 수
    99. 

  99. 있습니다(기본값 30).</p>
    100. 

  100. <div class="spread">
    101. 

  101.   <div>
    102. 

  102.     <div data-diagram="MeshPhongMaterialShininess0"></div>
    103. 

  103.     <div class="code">shininess: 0</div>
    104. 

  104.   </div>
    105. 

  105.   <div>
    106. 

  106.     <div data-diagram="MeshPhongMaterialShininess30"></div>
    107. 

  107.     <div class="code">shininess: 30</div>
    108. 

  108.   </div>
    109. 

  109.   <div>
    110. 

  110.     <div data-diagram="MeshPhongMaterialShininess150"></div>
    111. 

  111.     <div class="code">shininess: 150</div>
    112. 

  112.   </div>
    113. 

  113. </div>
    114. 

  114. 

  115. <p>만약 <a href="/docs/#api/ko/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a>이나 <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>의 <code class="notranslate" translate="no">emissive</code> 속성에
    116. 

  116. 색상값을 지정하고, (<a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>은 <code class="notranslate" translate="no">shininess</code>도 0으로 지정해야함)
    117. 

  117. <code class="notranslate" translate="no">color</code> 속성을 검정으로 지정하면 <a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>과 마찬가지로 입체감이
    118. 

  118. 사라집니다.</p>
    119. 

  119. <div class="spread">
    120. 

  120.   <div>
    121. 

  121.     <div data-diagram="MeshBasicMaterialCompare"></div>
    122. 

  122.     <div class="code">
    123. 

  123.       <div>Basic</div>
    124. 

  124.       <div>color: 'purple'</div>
    125. 

  125.     </div>
    126. 

  126.   </div>
    127. 

  127.   <div>
    128. 

  128.     <div data-diagram="MeshLambertMaterialCompare"></div>
    129. 

  129.     <div class="code">
    130. 

  130.       <div>Lambert</div>
    131. 

  131.       <div>color: 'black'</div>
    132. 

  132.       <div>emissive: 'purple'</div>
    133. 

  133.     </div>
    134. 

  134.   </div>
    135. 

  135.   <div>
    136. 

  136.     <div data-diagram="MeshPhongMaterialCompare"></div>
    137. 

  137.     <div class="code">
    138. 

  138.       <div>Phong</div>
    139. 

  139.       <div>color: 'black'</div>
    140. 

  140.       <div>emissive: 'purple'</div>
    141. 

  141.       <div>shininess: 0</div>
    142. 

  142.     </div>
    143. 

  143.   </div>
    144. 

  144. </div>
    145. 

  145. 

  146. <p>왜 <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>로 <a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>과 <a href="/docs/#api/ko/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a>을
    147. 

  147. 구현할 수 있는데 3가지로 분리해 놓았을까요? 이미 감을 잡으셨겠지만, 재질이
    148. 

  148. 정교할수록 GPU의 부담이 커지기 때문입니다. GPU 성능이 낮은 저사양 기기에서는
    149. 

  149. 덜 정교한 재질을 씀으로써 GPU의 부담을 줄일 수 있죠. 또한 복잡한 표현이 필요
    150. 

  150. 없다면 더 간단한 재질을, 광원 효과가 아예 필요 없다면 <a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>을
    151. 

  151. 사용하는 것이 좋습니다.</p>
    152. 

  152. <p><a href="/docs/#api/ko/materials/MeshToonMaterial"><code class="notranslate" translate="no">MeshToonMaterial</code></a>은 <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>과 유사하나, 큰 차이점이 하나 있습니다.
    153. 

  153. 부드럽게 쉐이딩(shading)하는 대신, <a href="/docs/#api/ko/materials/MeshToonMaterial"><code class="notranslate" translate="no">MeshToonMaterial</code></a>은 그라디언트 맵(gradient map)을
    154. 

  154. 사용합니다. 기본적으로 <a href="/docs/#api/ko/materials/MeshToonMaterial"><code class="notranslate" translate="no">MeshToonMaterial</code></a>은 처음 70%까지는 밝고 다음 100%까지는
    155. 

  155. 어두운 그라디언트 맵을 사용하나, 그라디언트 맵을 직접 지정해 줄 수도 있죠. <a href="/docs/#api/ko/materials/MeshToonMaterial"><code class="notranslate" translate="no">MeshToonMaterial</code></a>로
    156. 

  156. 만든 물체는 투톤을 띄어 카툰 느낌을 줍니다.</p>
    157. 

  157. <div class="spread">
    158. 

  158.   <div data-diagram="MeshToonMaterial"></div>
    159. 

  159. </div>
    160. 

  160. 

  161. <p>다음으로 살펴 볼 두 재질은 <em>물리 기반 렌더링을 위한</em> 재질입니다. 물리 기반 렌더링(Physically Based Rendering)은
    162. 

  162. 줄여서 PBR이라고 하죠.</p>
    163. 

  163. <p>위에서 살펴본 재질들은 재질을 3D처럼 보이게 하기 위해 간단한 수학을 사용하나,
    164. 

  164. 이는 실제 세계와는 다릅니다. 이 두 가지 PBR 재질은 실제 세계에서처럼 물체를
    165. 

  165. 구현하기 위해 훨씬 복잡한 수학을 사용하죠.</p>
    166. 

  166. <p>첫 번째는 <a href="/docs/#api/ko/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>입니다.<a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>과 <a href="/docs/#api/ko/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>의
    167. 

  167. 가장 큰 차이점은 사용하는 속성이 다르다는 점입니다. <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>은
    168. 

  168. <code class="notranslate" translate="no">shininess</code>를 사용하지만, <a href="/docs/#api/ko/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>은 <code class="notranslate" translate="no">roughness</code>와 <code class="notranslate" translate="no">metalness</code>
    169. 

  169. 두 가지 속성을 사용합니다.</p>
    170. 

  170. <p><a href="/docs/#api/ko/materials/MeshStandardMaterial#roughness"><code class="notranslate" translate="no">roughness</code></a>는 <code class="notranslate" translate="no">roughness</code>는
    171. 

  171. 0부터 1까지의 숫자값으로, <code class="notranslate" translate="no">shininess</code>의 반대입니다. 높은 <code class="notranslate" translate="no">roughness</code>를
    172. 

  172. 가진 물체, 예를 들어 야구공은 빛 반사가 거의 없지만, 반대로 낮은
    173. 

  173. <code class="notranslate" translate="no">roughness</code>를 가진 물체, 당구공은 매우 번들번들하죠.</p>
    174. 

  174. <p><a href="/docs/#api/ko/materials/MeshStandardMaterial#metalness"><code class="notranslate" translate="no">metalness</code></a>는 얼마나 금속성입니다.
    175. 

  175. 얼마나 금속 재질에 가까울 것인가로써, 0은 아예 금속 같지 않은 것이고,
    176. 

  176. 1은 완전히 금속처럼 보이는 것을 의미합니다.</p>
    177. 

  177. <p>아래의 예제는 <a href="/docs/#api/ko/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>의 <code class="notranslate" translate="no">roughness</code>를 왼쪽에서 오른쪽으로
    178. 

  178. 커지게(0 -&gt; 1), <code class="notranslate" translate="no">metalness</code>를 위에서 아래로 커지게(0 -&gt; 1) 한 것입니다.</p>
    179. 

  179. <div data-diagram="MeshStandardMaterial" style="min-height: 400px"></div>
    180. 

  180. 

  181. <p><a href="/docs/#api/ko/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a>은 <a href="/docs/#api/ko/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>과 기본적으로 같지만,
    182. 

  182. 0부터 1까지의 <code class="notranslate" translate="no">clearcoat</code> 속성으로 표면에 코팅 세기를 설정하고,
    183. 

  183. <code class="notranslate" translate="no">clearcoatRoughness</code> 속성으로 코팅의 거침 정도를 설정한다는 점이 다릅니다.</p>
    184. 

  184. <p>아래는 위의 예제와 마찬가지로 <code class="notranslate" translate="no">roughness</code>와 <code class="notranslate" translate="no">metalness</code> 속성을 주고
    185. 

  185. <code class="notranslate" translate="no">clearcoat</code> 속성과 <code class="notranslate" translate="no">clearcoatRoughness</code> 속성을 조정할 수 있도록 한 예제입니다.</p>
    186. 

  186. <div data-diagram="MeshPhysicalMaterial" style="min-height: 400px"></div>
    187. 

  187. 

  188. <p>여태까지 살펴본 Three.js의 기본 재질을 성능이 빠른 것부터 나열하면,</p>
    189. 

  189. <p><a href="/docs/#api/ko/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> ➡ <a href="/docs/#api/ko/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> ➡ <a href="/docs/#api/ko/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> ➡
    190. 

  190. <a href="/docs/#api/ko/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> ➡ <a href="/docs/#api/ko/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a></p>
    191. 

  191. <p>입니다. 성능 부담이
    192. 

  192. 클수록 더 현실적인 결과물을 얻을 수 있지만, 저사양 지원을 위해서는 코드
    193. 

  193. 최적화에 그만큼 신경을 써야 합니다.</p>
    194. 

  194. <p>또 특수한 경우에 사용하는 세 가지 재질이 있습니다. <a href="/docs/#api/ko/materials/ShadowMaterial"><code class="notranslate" translate="no">ShadowMaterial</code></a>은
    195. 

  195. 그림자로부터 데이터를 가져오는 데 사용하죠. 아직 그림자에 대해서는 다루지
    196. 

  196. 않았지만, 그림자에 대해서 살펴볼 때 씬 뒤에서 무슨 일이 일어나는지
    197. 

  197. 자세히 살펴볼 것입니다.</p>
    198. 

  198. <p><a href="/docs/#api/ko/materials/MeshDepthMaterial"><code class="notranslate" translate="no">MeshDepthMaterial</code></a>은 각 픽셀의 깊이를 렌더링합니다. 카메라의 마이너스
    199. 

  199. <a href="/docs/#api/ko/cameras/PerspectiveCamera#near"><code class="notranslate" translate="no">near</code></a>에 위치한 픽셀은 0으로, 마이너스
    200. 

  200. <a href="/docs/#api/ko/cameras/PerspectiveCamera#far"><code class="notranslate" translate="no">far</code></a>에 위치한 픽셀은 1로 렌더링하죠. 이 재질을
    201. 

  201. 사용해 구현할 수 있는 것에 대해서는 다른 글에서 나중에 다뤄보겠습니다.</p>
    202. 

  202. <div class="spread">
    203. 

  203.   <div>
    204. 

  204.     <div data-diagram="MeshDepthMaterial"></div>
    205. 

  205.   </div>
    206. 

  206. </div>
    207. 

  207. 

  208. <p><a href="/docs/#api/ko/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a>은 <code class="notranslate" translate="no">geometry</code>의 <em>법선(normals)</em>을 보여줍니다.
    209. 

  209. <em>법선</em>이란 특정한 삼각형이나 픽셀이 가리키는 방향을 의미하죠.
    210. 

  210. <a href="/docs/#api/ko/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a>은 카메라를 기반으로 법선을 렌더링합니다.
    211. 

  211. <span class="color:red;">x축은 빨강</span>,
    212. 

  212. <span class="color:green;">y축은 초록</span>,
    213. 

  213. <span class="color:blue;">z축은 파랑</span>이죠.
    214. 

  214. 다시 말해 오른쪽 면은 <span class="color:#FF7F7F;">분홍</span>,
    215. 

  215. 왼쪽 면은 <span class="color:#007F7F;">청녹</span>,
    216. 

  216. 위쪽 면은 <span class="color:#7FFF7F;">청녹</span>,
    217. 

  217. 아래쪽 면은 <span class="color:#7F007F;">자주</span>,
    218. 

  218. 정면은 <span class="color:#7F7FFF;">연보라</span>가 됩니다.</p>
    219. 

  219. <div class="spread">
    220. 

  220.   <div>
    221. 

  221.     <div data-diagram="MeshNormalMaterial"></div>
    222. 

  222.   </div>
    223. 

  223. </div>
    224. 

  224. 

  225. <p><a href="/docs/#api/ko/materials/ShaderMaterial"><code class="notranslate" translate="no">ShaderMaterial</code></a>과 <a href="/docs/#api/ko/materials/RawShaderMaterial"><code class="notranslate" translate="no">RawShaderMaterial</code></a>은 재질을 커스텀할 때 사용합니다.
    226. 

  226. 둘의 차이점은 <a href="/docs/#api/ko/materials/ShaderMaterial"><code class="notranslate" translate="no">ShaderMaterial</code></a>은 Three.js의 쉐이더 시스템을 이용하고,
    227. 

  227. <a href="/docs/#api/ko/materials/RawShaderMaterial"><code class="notranslate" translate="no">RawShaderMaterial</code></a>은 아예 Three.js의 도움을 받지 않는다는 점이죠. 둘
    228. 

  228. 다 짧게 다루기는 어려운 주제로, 나중에 상세하게 다루겠습니다.</p>
    229. 

  229. <p>재질 속성(properties)의 대부분은 <a href="/docs/#api/ko/materials/Material"><code class="notranslate" translate="no">Material</code></a> 클래스에 의해 정의됩니다.
    230. 

  230. 자세한 건 <a href="/docs/#api/ko/materials/Material">공식 문서</a>를 참고하되, 여기서는 자주 사용하는
    231. 

  231. 두 가지 속성만 살펴보도록 하죠.</p>
    232. 

  232. <p><a href="/docs/#api/ko/materials/Material#flatShading"><code class="notranslate" translate="no">flatShading</code></a>:
    233. 

  233. 물체를 각지게(faceted) 표현할지의 여부입니다. 기본값은 <code class="notranslate" translate="no">false</code>.</p>
    234. 

  234. <div class="spread">
    235. 

  235.   <div>
    236. 

  236.     <div data-diagram="smoothShading"></div>
    237. 

  237.     <div class="code">flatShading: false</div>
    238. 

  238.   </div>
    239. 

  239.   <div>
    240. 

  240.     <div data-diagram="flatShading"></div>
    241. 

  241.     <div class="code">flatShading: true</div>
    242. 

  242.   </div>
    243. 

  243. </div>
    244. 

  244. 

  245. <p><a href="/docs/#api/ko/materials/Material#side"><code class="notranslate" translate="no">side</code></a>:
    246. 

  246. 어떤 면을 렌더링할지의 여부입니다. 기본값은 <code class="notranslate" translate="no">THREE.FrontSide(앞면)</code>.
    247. 

  247. 다른 값으로는 <code class="notranslate" translate="no">THREE.BackSide(뒷면)</code>와 <code class="notranslate" translate="no">THREE.DoubleSide(양면)</code>를
    248. 

  248. 지정할 수 있습니다. 3D로 렌더링한 물체는 대부분 불투명한 고체이기에,
    249. 

  249. 뒷면(고체의 안쪽면)은 굳이 렌더링할 필요가 없습니다. <code class="notranslate" translate="no">side</code> 속성을
    250. 

  250. 별도로 지정하는 경우는 면이나 비-고체 등 뒷면을 렌더링해야 할 경우
    251. 

  251. 뿐이죠.</p>
    252. 

  252. <p>아래는 각각 <code class="notranslate" translate="no">THREE.FrontSide</code>와 <code class="notranslate" translate="no">THREE.DoubleSide</code>를 이용해 6개의
    253. 

  253. 면을 렌더링한 것입니다.</p>
    254. 

  254. <div class="spread">
    255. 

  255.   <div>
    256. 

  256.     <div data-diagram="sideDefault" style="height: 250px;"></div>
    257. 

  257.     <div class="code">side: THREE.FrontSide</div>
    258. 

  258.   </div>
    259. 

  259.   <div>
    260. 

  260.     <div data-diagram="sideDouble" style="height: 250px;"></div>
    261. 

  261.     <div class="code">side: THREE.DoubleSide</div>
    262. 

  262.   </div>
    263. 

  263. </div>
    264. 

  264. 

  265. <p>실제 프로젝트에서 재질을 다룰 때는 고려해야 할 것이 훨씬 많습니다.
    266. 

  266. 이 장에서는 아주 기본적인 것만 살펴보았을 뿐이고, 제대로 사용하기
    267. 

  267. 위해서는 알아야 할 것들이 훨씬 더 많죠. 예를 들어 나중에 살펴볼
    268. 

  268. 텍스처(textures, 질감)만 추가해도 경우의 수가 엄청나게 늘어납니다.
    269. 

  269. 말 나온 김에 바로 텍스처를 살펴보는 것도 좋지만, 다음 장에서는 잠시
    270. 

  270. 쉬어가는 의미로 <a href="setup.html">Three.js 개발 환경 구성하기</a>에
    271. 

  271. 대해 알아보겠습니다.</p>
    272. 

  272. <div class="threejs_bottombar">
    273. 

  273. <h3>material.needsUpdate</h3>
    274. 

  274. <p>
    275. 

  275. 이 속성은 사용할 일이 그다지 많진 않으니 참고로 알아두시기 바랍니다.
    276. 

  276. Three.js는 재질을 사용할 때-해당 재질을 사용하는 물체를 렌더링할 때-
    277. 

  277. 재질의 설정을 적용합니다. 재질을 바꿀 때는 많은 자원이 들어가기에,
    278. 

  278. Three.js는 기본적으로 처음 한 번만 재질의 설정을 적용합니다. 만약
    279. 

  279. 재질의 속성(properties)을 런타임에 바꿔야 할 경우, <code class="notranslate" translate="no">material.needsUpdate = true</code>를
    280. 

  280. 설정해 Three.js가 변경사항을 반영하도록 해야 하죠. 대표적으로
    281. 

  281. <code class="notranslate" translate="no">needsUpdate</code>를 사용해야 하는 경우는 다음과 같습니다.
    282. 

  282. 

  283. </p>
    284. 

  284. <ul>
    285. 

  285.   <li><code class="notranslate" translate="no">flatShading</code> 속성을 변경할 때</li>
    286. 

  286.   <li>텍스처를 추가/제거할 때
    287. 

  287.     <p>
    288. 

  288.     단순히 텍스처를 변경할 때는 상관없으나, 아예 텍스처를 사용하지 않다가
    289. 

  289.     텍스처를 추가하는 경우, 또는 텍스처를 사용하다가 텍스처를 제거하는 경우
    290. 

  290.     <code class="notranslate" translate="no">needsUpdate = true</code>를 설정해주어야 합니다.
    291. 

  291.     </p>
    292. 

  292.     <p>
    293. 

  293.     하지만 텍스처를 제거하는 경우, 대게 1x1 하얀색 픽셀 텍스처로 변경하는 게
    294. 

  294.     낫습니다.
    295. 

  295.   </p></li>
    296. 

  296. </ul>
    297. 

  297. <p>
    298. 

  298. 위에서 언급했듯, 대부분의 앱은 이런 경우를 고려할 일이 거의 없습니다.
    299. 

  299. <code class="notranslate" translate="no">flatShade</code> 속성을 변경하는 경우는 흔치 않고, 텍스처를 변경하는
    300. 

  300. 경우는 있어도 물체의 속성이나 색상을 지정하지 않았다가 추가하는 경우는 흔치 않기
    301. 

  301. 때문입니다.
    302. 

  302. </p>
    303. 

  303. </div>
    304. 

  304. 

  305. <p><canvas id="c"></canvas></p>
    306. 

  306. <script type="module" src="../resources/threejs-materials.js"></script>
    307. 

  307.         </div>
    308. 

  308.       </div>
    309. 

  309.     </div>
    310. 

  310. 

  311.   <script src="../resources/prettify.js"></script>
    312. 

  312.   <script src="../resources/lesson.js"></script>
    313. 

  313. 

  314. 

  315. 

  316. 

  317. </body></html>
    318.