Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
javascript
/
three.js
zrkadlo https://github.com/tazdij/three.js.git
2
0
Fork 0
Súbory Issues 0 Wiki
Strom: r136
Branche Tagy
three.js
/
manual
/
en
/
materials.html

materials.html 18 KB
Permanentný odkaz História Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303 
  1. <!DOCTYPE html><html lang="en"><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="/manual/resources/lesson.css">
    13. 

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

  14.   </head>
    15. 

  15.   <body>
    16. 

  16.     <div class="container">
    17. 

  17.       <div class="lesson-title">
    18. 

  18.         <h1>Materials</h1>
    19. 

  19.       </div>
    20. 

  20.       <div class="lesson">
    21. 

  21.         <div class="lesson-main">
    22. 

  22.           <p>This article is part of a series of articles about three.js. The
    23. 

  23. first article is <a href="fundamentals.html">three.js fundamentals</a>. If
    24. 

  24. you haven't read that yet and you're new to three.js you might want to
    25. 

  25. consider starting there.</p>
    26. 

  26. <p>Three.js provides several types of materials.
    27. 

  27. They define how objects will appear in the scene.
    28. 

  28. Which materials you use really depends on what you're trying to
    29. 

  29. accomplish.</p>
    30. 

  30. <p>There are 2 ways to set most material properties. One at creation time which
    31. 

  31. we've seen before.</p>
    32. 

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

  33.   color: 0xFF0000,    // red (can also use a CSS color string here)
    34. 

  34.   flatShading: true,
    35. 

  35. });
    36. 

  36. </pre>
    37. 

  37. <p>The other is after creation</p>
    38. 

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

  39. material.color.setHSL(0, 1, .5);  // red
    40. 

  40. material.flatShading = true;
    41. 

  41. </pre>
    42. 

  42. <p>note that properties of type <a href="/docs/#api/en/math/Color"><code class="notranslate" translate="no">THREE.Color</code></a> have multiple ways to be set.</p>
    43. 

  43. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">material.color.set(0x00FFFF);    // same as CSS's #RRGGBB style
    44. 

  44. material.color.set(cssString);   // any CSS color, eg 'purple', '#F32',
    45. 

  45.                                  // 'rgb(255, 127, 64)',
    46. 

  46.                                  // 'hsl(180, 50%, 25%)'
    47. 

  47. material.color.set(someColor)    // some other THREE.Color
    48. 

  48. material.color.setHSL(h, s, l)   // where h, s, and l are 0 to 1
    49. 

  49. material.color.setRGB(r, g, b)   // where r, g, and b are 0 to 1
    50. 

  50. </pre>
    51. 

  51. <p>And at creation time you can pass either a hex number or a CSS string</p>
    52. 

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

  53. const m2 = new THREE.MeshBasicMaterial({color: 'red'});            // red
    54. 

  54. const m3 = new THREE.MeshBasicMaterial({color: '#F00'});           // red
    55. 

  55. const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'});   // red
    56. 

  56. const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'); // red
    57. 

  57. </pre>
    58. 

  58. <p>So let's go over three.js's set of materials.</p>
    59. 

  59. <p>The <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> is not affected by lights.
    60. 

  60. The <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> computes lighting only at the vertices vs the <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> which computes lighting at every pixel. The <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>
    61. 

  61. also supports specular highlights.</p>
    62. 

  62. <div class="spread">
    63. 

  63.   <div>
    64. 

  64.     <div data-diagram="MeshBasicMaterial"></div>
    65. 

  65.     <div class="code">Basic</div>
    66. 

  66.   </div>
    67. 

  67.   <div>
    68. 

  68.     <div data-diagram="MeshLambertMaterial"></div>
    69. 

  69.     <div class="code">Lambert</div>
    70. 

  70.   </div>
    71. 

  71.   <div>
    72. 

  72.     <div data-diagram="MeshPhongMaterial"></div>
    73. 

  73.     <div class="code">Phong</div>
    74. 

  74.   </div>
    75. 

  75. </div>
    76. 

  76. <div class="spread">
    77. 

  77.   <div>
    78. 

  78.     <div data-diagram="MeshBasicMaterialLowPoly"></div>
    79. 

  79.   </div>
    80. 

  80.   <div>
    81. 

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

  82.   </div>
    83. 

  83.   <div>
    84. 

  84.     <div data-diagram="MeshPhongMaterialLowPoly"></div>
    85. 

  85.   </div>
    86. 

  86. </div>
    87. 

  87. <div class="threejs_center code">low-poly models with same materials</div>
    88. 

  88. 

  89. <p>The <code class="notranslate" translate="no">shininess</code> setting of the <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> determines the <em>shininess</em> of the specular highlight. It defaults to 30.</p>
    90. 

  90. <div class="spread">
    91. 

  91.   <div>
    92. 

  92.     <div data-diagram="MeshPhongMaterialShininess0"></div>
    93. 

  93.     <div class="code">shininess: 0</div>
    94. 

  94.   </div>
    95. 

  95.   <div>
    96. 

  96.     <div data-diagram="MeshPhongMaterialShininess30"></div>
    97. 

  97.     <div class="code">shininess: 30</div>
    98. 

  98.   </div>
    99. 

  99.   <div>
    100. 

  100.     <div data-diagram="MeshPhongMaterialShininess150"></div>
    101. 

  101.     <div class="code">shininess: 150</div>
    102. 

  102.   </div>
    103. 

  103. </div>
    104. 

  104. 

  105. <p>Note that setting the <code class="notranslate" translate="no">emissive</code> property to a color on either a
    106. 

  106. <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> or a <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> and setting the <code class="notranslate" translate="no">color</code> to black
    107. 

  107. (and <code class="notranslate" translate="no">shininess</code> to 0 for phong) ends up looking just like the <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>.</p>
    108. 

  108. <div class="spread">
    109. 

  109.   <div>
    110. 

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

  111.     <div class="code">
    112. 

  112.       <div>Basic</div>
    113. 

  113.       <div>color: 'purple'</div>
    114. 

  114.     </div>
    115. 

  115.   </div>
    116. 

  116.   <div>
    117. 

  117.     <div data-diagram="MeshLambertMaterialCompare"></div>
    118. 

  118.     <div class="code">
    119. 

  119.       <div>Lambert</div>
    120. 

  120.       <div>color: 'black'</div>
    121. 

  121.       <div>emissive: 'purple'</div>
    122. 

  122.     </div>
    123. 

  123.   </div>
    124. 

  124.   <div>
    125. 

  125.     <div data-diagram="MeshPhongMaterialCompare"></div>
    126. 

  126.     <div class="code">
    127. 

  127.       <div>Phong</div>
    128. 

  128.       <div>color: 'black'</div>
    129. 

  129.       <div>emissive: 'purple'</div>
    130. 

  130.       <div>shininess: 0</div>
    131. 

  131.     </div>
    132. 

  132.   </div>
    133. 

  133. </div>
    134. 

  134. 

  135. <p>Why have all 3 when <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> can do the same things as <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>
    136. 

  136. and <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a>? The reason is the more sophisticated material
    137. 

  137. takes more GPU power to draw. On a slower GPU like say a mobile phone
    138. 

  138. you might want to reduce the GPU power needed to draw your scene by
    139. 

  139. using one of the less complex materials. It also follows that if you
    140. 

  140. don't need the extra features then use the simplest material. If you don't
    141. 

  141. need the lighting and the specular highlight then use the <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>.</p>
    142. 

  142. <p>The <a href="/docs/#api/en/materials/MeshToonMaterial"><code class="notranslate" translate="no">MeshToonMaterial</code></a> is similar to the <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>
    143. 

  143. with one big difference. Rather than shading smoothly it uses a gradient map
    144. 

  144. (an X by 1 texture) to decide how to shade. The default uses a gradient map
    145. 

  145. that is 70% brightness for the first 70% and 100% after but you can supply your
    146. 

  146. own gradient map. This ends up giving a 2 tone look that looks like a cartoon.</p>
    147. 

  147. <div class="spread">
    148. 

  148.   <div data-diagram="MeshToonMaterial"></div>
    149. 

  149. </div>
    150. 

  150. 

  151. <p>Next up there are 2 <em>physically based rendering</em> materials. Physically Based
    152. 

  152. Rendering is often abbreviated PBR.</p>
    153. 

  153. <p>The materials above use simple math to make materials that look 3D but they
    154. 

  154. aren't what actually happens in real world. The 2 PBR materials use much more
    155. 

  155. complex math to come close to what actually happens in the real world.</p>
    156. 

  156. <p>The first one is <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>. The biggest difference between
    157. 

  157. <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> and <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> is it uses different parameters.
    158. 

  158. <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> had a <code class="notranslate" translate="no">shininess</code> setting. <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> has 2
    159. 

  159. settings <code class="notranslate" translate="no">roughness</code> and <code class="notranslate" translate="no">metalness</code>.</p>
    160. 

  160. <p>At a basic level <a href="/docs/#api/en/materials/MeshStandardMaterial#roughness"><code class="notranslate" translate="no">roughness</code></a> is the opposite
    161. 

  161. of <code class="notranslate" translate="no">shininess</code>. Something that has a high roughness, like a baseball doesn't
    162. 

  162. have hard reflections whereas something that's not rough, like a billiard ball,
    163. 

  163. is very shiny. Roughness goes from 0 to 1.</p>
    164. 

  164. <p>The other setting, <a href="/docs/#api/en/materials/MeshStandardMaterial#metalness"><code class="notranslate" translate="no">metalness</code></a>, says
    165. 

  165. how metal the material is. Metals behave differently than non-metals. 0
    166. 

  166. for non-metal and 1 for metal.</p>
    167. 

  167. <p>Here's a quick sample of <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> with <code class="notranslate" translate="no">roughness</code> from 0 to 1
    168. 

  168. across and <code class="notranslate" translate="no">metalness</code> from 0 to 1 down.</p>
    169. 

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

  170. 

  171. <p>The <a href="/docs/#api/en/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a> is same as the <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> but it
    172. 

  172. adds a <code class="notranslate" translate="no">clearcoat</code> parameter that goes from 0 to 1 for how much to
    173. 

  173. apply a clearcoat gloss layer and a <code class="notranslate" translate="no">clearCoatRoughness</code> parameter
    174. 

  174. that specifies how rough the gloss layer is.</p>
    175. 

  175. <p>Here's the same grid of <code class="notranslate" translate="no">roughness</code> by <code class="notranslate" translate="no">metalness</code> as above but with
    176. 

  176. <code class="notranslate" translate="no">clearcoat</code> and <code class="notranslate" translate="no">clearCoatRoughness</code> settings.</p>
    177. 

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

  178. 

  179. <p>The various standard materials progress from fastest to slowest
    180. 

  180. <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> ➡
    181. 

  181. <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a>. The slower materials
    182. 

  182. can make more realistic looking scenes but you might need to design
    183. 

  183. your code to use the faster materials on low powered or mobile machines.</p>
    184. 

  184. <p>There are 3 materials that have special uses. <a href="/docs/#api/en/materials/ShadowMaterial"><code class="notranslate" translate="no">ShadowMaterial</code></a>
    185. 

  185. is used to get the data created from shadows. We haven't
    186. 

  186. covered shadows yet. When we do we'll use this material
    187. 

  187. to take a peek at what's happening behind the scenes.</p>
    188. 

  188. <p>The <a href="/docs/#api/en/materials/MeshDepthMaterial"><code class="notranslate" translate="no">MeshDepthMaterial</code></a> renders the depth of each pixel where
    189. 

  189. pixels at negative <a href="/docs/#api/en/cameras/PerspectiveCamera#near"><code class="notranslate" translate="no">near</code></a> of the camera are 0 and negative <a href="/docs/#api/en/cameras/PerspectiveCamera#far"><code class="notranslate" translate="no">far</code></a> are 1. Certain special effects can use this data which we'll
    190. 

  190. get into at another time.</p>
    191. 

  191. <div class="spread">
    192. 

  192.   <div>
    193. 

  193.     <div data-diagram="MeshDepthMaterial"></div>
    194. 

  194.   </div>
    195. 

  195. </div>
    196. 

  196. 

  197. <p>The <a href="/docs/#api/en/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a> will show you the <em>normals</em> of geometry.
    198. 

  198. <em>Normals</em> are the direction a particular triangle or pixel faces.
    199. 

  199. <a href="/docs/#api/en/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a> draws the view space normals (the normals relative to the camera).
    200. 

  200. <span style="background: red;" class="color">x is red</span>,
    201. 

  201. <span style="background: green;" class="dark-color">y is green</span>, and
    202. 

  202. <span style="background: blue;" class="dark-color">z is blue</span> so things facing
    203. 

  203. to the right will be <span style="background: #FF7F7F;" class="color">pink</span>,
    204. 

  204. to the left will be <span style="background: #007F7F;" class="dark-color">aqua</span>,
    205. 

  205. up will be <span style="background: #7FFF7F;" class="color">light green</span>,
    206. 

  206. down will be <span style="background: #7F007F;" class="dark-color">purple</span>,
    207. 

  207. and toward the screen will be <span style="background: #7F7FFF;" class="color">lavender</span>.</p>
    208. 

  208. <div class="spread">
    209. 

  209.   <div>
    210. 

  210.     <div data-diagram="MeshNormalMaterial"></div>
    211. 

  211.   </div>
    212. 

  212. </div>
    213. 

  213. 

  214. <p><a href="/docs/#api/en/materials/ShaderMaterial"><code class="notranslate" translate="no">ShaderMaterial</code></a> is for making custom materials using the three.js shader
    215. 

  215. system. <a href="/docs/#api/en/materials/RawShaderMaterial"><code class="notranslate" translate="no">RawShaderMaterial</code></a> is for making entirely custom shaders with
    216. 

  216. no help from three.js. Both of these topics are large and will be
    217. 

  217. covered later.</p>
    218. 

  218. <p>Most materials share a bunch of settings all defined by <a href="/docs/#api/en/materials/Material"><code class="notranslate" translate="no">Material</code></a>.
    219. 

  219. <a href="/docs/#api/en/materials/Material">See the docs</a>
    220. 

  220. for all of them but let's go over two of the most commonly used
    221. 

  221. properties.</p>
    222. 

  222. <p><a href="/docs/#api/en/materials/Material#flatShading"><code class="notranslate" translate="no">flatShading</code></a>:
    223. 

  223. whether or not the object looks faceted or smooth. default = <code class="notranslate" translate="no">false</code>.</p>
    224. 

  224. <div class="spread">
    225. 

  225.   <div>
    226. 

  226.     <div data-diagram="smoothShading"></div>
    227. 

  227.     <div class="code">flatShading: false</div>
    228. 

  228.   </div>
    229. 

  229.   <div>
    230. 

  230.     <div data-diagram="flatShading"></div>
    231. 

  231.     <div class="code">flatShading: true</div>
    232. 

  232.   </div>
    233. 

  233. </div>
    234. 

  234. 

  235. <p><a href="/docs/#api/en/materials/Material#side"><code class="notranslate" translate="no">side</code></a>: which sides of triangles to show. The default is <code class="notranslate" translate="no">THREE.FrontSide</code>.
    236. 

  236. Other options are <code class="notranslate" translate="no">THREE.BackSide</code> and <code class="notranslate" translate="no">THREE.DoubleSide</code> (both sides).
    237. 

  237. Most 3D objects drawn in three are probably opaque solids so the back sides
    238. 

  238. (the sides facing inside the solid) do not need to be drawn. The most common
    239. 

  239. reason to set <code class="notranslate" translate="no">side</code> is for planes or other non-solid objects where it is
    240. 

  240. common to see the back sides of triangles.</p>
    241. 

  241. <p>Here are 6 planes drawn with <code class="notranslate" translate="no">THREE.FrontSide</code> and <code class="notranslate" translate="no">THREE.DoubleSide</code>.</p>
    242. 

  242. <div class="spread">
    243. 

  243.   <div>
    244. 

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

  245.     <div class="code">side: THREE.FrontSide</div>
    246. 

  246.   </div>
    247. 

  247.   <div>
    248. 

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

  249.     <div class="code">side: THREE.DoubleSide</div>
    250. 

  250.   </div>
    251. 

  251. </div>
    252. 

  252. 

  253. <p>There's really a lot to consider with materials and we actually still
    254. 

  254. have a bunch more to go. In particular we've mostly ignored textures
    255. 

  255. which open up a whole slew of options. Before we cover textures though
    256. 

  256. we need to take a break and cover
    257. 

  257. <a href="setup.html">setting up your development environment</a></p>
    258. 

  258. <div class="threejs_bottombar">
    259. 

  259. <h3>material.needsUpdate</h3>
    260. 

  260. <p>
    261. 

  261. This topic rarely affects most three.js apps but just as an FYI...
    262. 

  262. Three.js applies material settings when a material is used where "used"
    263. 

  263. means "something is rendered that uses the material". Some material settings are
    264. 

  264. only applied once as changing them requires lots of work by three.js.
    265. 

  265. In those cases you need to set <code class="notranslate" translate="no">material.needsUpdate = true</code> to tell
    266. 

  266. three.js to apply your material changes. The most common settings
    267. 

  267. that require you to set <code class="notranslate" translate="no">needsUpdate</code> if you change the settings after
    268. 

  268. using the material are:
    269. 

  269. </p>
    270. 

  270. <ul>
    271. 

  271.   <li><code class="notranslate" translate="no">flatShading</code></li>
    272. 

  272.   <li>adding or removing a texture
    273. 

  273.     <p>
    274. 

  274.     Changing a texture is ok, but if want to switch from using no texture
    275. 

  275.     to using a texture or from using a texture to using no texture
    276. 

  276.     then you need to set <code class="notranslate" translate="no">needsUpdate = true</code>.
    277. 

  277.     </p>
    278. 

  278.     <p>In the case of going from texture to no-texture it is often
    279. 

  279.     just better to use a 1x1 pixel white texture.</p>
    280. 

  280.   </li>
    281. 

  281. </ul>
    282. 

  282. <p>As mentioned above most apps never run into these issues. Most apps
    283. 

  283. do not switch between flat shaded and non flat shaded. Most apps also
    284. 

  284. either use textures or a solid color for a given material, they rarely
    285. 

  285. switch from using one to using the other.
    286. 

  286. </p>
    287. 

  287. </div>
    288. 

  288. 

  289. <p><canvas id="c"></canvas></p>
    290. 

  290. <script type="module" src="../resources/threejs-materials.js"></script>
    291. 

  291. 

  292. 

  293.         </div>
    294. 

  294.       </div>
    295. 

  295.     </div>
    296. 

  296.   
    297. 

  297.   <script src="/manual/resources/prettify.js"></script>
    298. 

  298.   <script src="/manual/resources/lesson.js"></script>
    299. 

  299. 

  300. 

  301. 

  302. 

  303. </body></html>
    304.