Browse Source

Fix typos in materials article

Waj 6 years ago
parent
commit
eb6e93e132
1 changed files with 21 additions and 21 deletions
  1. 21 21
      threejs/lessons/threejs-materials.md

+ 21 - 21
threejs/lessons/threejs-materials.md

@@ -5,8 +5,8 @@ This article is part of a series of articles about three.js. The
 first article is [three.js fundamentals](threejs-fundamentals.html). If
 first article is [three.js fundamentals](threejs-fundamentals.html). If
 you haven't read that yet and you're new to three.js you might want to
 you haven't read that yet and you're new to three.js you might want to
 consider starting there.
 consider starting there.
- 
-Three.js provides several types of materials. 
+
+Three.js provides several types of materials.
 They define how objects will appear in the scene.
 They define how objects will appear in the scene.
 Which materials you use really depends on what you're trying to
 Which materials you use really depends on what you're trying to
 accomplish.
 accomplish.
@@ -33,12 +33,12 @@ note that properties of type `THREE.Color` have multiple ways to be set.
 
 
 ```js
 ```js
 material.color.set(0x00FFFF);    // same as CSS's #RRGGBB style
 material.color.set(0x00FFFF);    // same as CSS's #RRGGBB style
-material.color.set(cssString);   // any CSS color, eg 'purple', '#F32', 
+material.color.set(cssString);   // any CSS color, eg 'purple', '#F32',
                                  // 'rgb(255, 127, 64)',
                                  // 'rgb(255, 127, 64)',
                                  // 'hsl(180, 50%, 25%)'
                                  // 'hsl(180, 50%, 25%)'
 material.color.set(someColor)    // some other THREE.Color
 material.color.set(someColor)    // some other THREE.Color
 material.color.setHSL(h, s, l)   // where h, s, and l are 0 to 1
 material.color.setHSL(h, s, l)   // where h, s, and l are 0 to 1
-material.color.setRGB(r, g, b)   // where r, g, and b are 0 to 1                      
+material.color.setRGB(r, g, b)   // where r, g, and b are 0 to 1
 ```
 ```
 
 
 And at creation time you can pass either a hex number or a CSS string
 And at creation time you can pass either a hex number or a CSS string
@@ -53,7 +53,7 @@ const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'); // red
 
 
 So let's go over three.js's set of materials.
 So let's go over three.js's set of materials.
 
 
-The `MeshBasicMaterial` is not affected by lights. 
+The `MeshBasicMaterial` is not affected by lights.
 The `MeshLambertMaterial` computes lighting only at the vertices vs the `MeshPhongMaterial` which computes lighting at every pixel. The `MeshPhongMaterial`
 The `MeshLambertMaterial` computes lighting only at the vertices vs the `MeshPhongMaterial` which computes lighting at every pixel. The `MeshPhongMaterial`
 also supports specular highlights.
 also supports specular highlights.
 
 
@@ -101,7 +101,7 @@ The `shininess` setting of the `MeshPhongMaterial` determines the *shininess* of
   </div>
   </div>
 </div>
 </div>
 
 
-Note that setting the `emissive` property to a color on either a 
+Note that setting the `emissive` property to a color on either a
 `MeshLambertMaterial` or a `MeshPhongMaterial` and setting the `color` to black
 `MeshLambertMaterial` or a `MeshPhongMaterial` and setting the `color` to black
 (and `shininess` to 0 for phong) ends up looking just like the `MeshBasicMaterial`.
 (and `shininess` to 0 for phong) ends up looking just like the `MeshBasicMaterial`.
 
 
@@ -141,7 +141,7 @@ don't need the extra features then use the simplest material. If you don't
 need the lighting and the specular highlight then use the `MeshBasicMaterial`.
 need the lighting and the specular highlight then use the `MeshBasicMaterial`.
 
 
 The `MeshToonMaterial` is similar to the `MeshPhongMaterial`
 The `MeshToonMaterial` is similar to the `MeshPhongMaterial`
-with one big difference. Rather than shading smoothly it uses a gradient map 
+with one big difference. Rather than shading smoothly it uses a gradient map
 (an X by 1 texture) to decide how to shade. The default uses a gradient map
 (an X by 1 texture) to decide how to shade. The default uses a gradient map
 that is 70% brightness for the first 70% and 100% after but you can supply your
 that is 70% brightness for the first 70% and 100% after but you can supply your
 own gradient map. This ends up giving a 2 tone look that looks like a cartoon.
 own gradient map. This ends up giving a 2 tone look that looks like a cartoon.
@@ -163,8 +163,8 @@ The first one is `MeshStandardMaterial`. The biggest difference between
 settings `roughness` and `metalness`.
 settings `roughness` and `metalness`.
 
 
 At a basic level [`roughness`](MeshStandardMaterial.roughness) is the opposite
 At a basic level [`roughness`](MeshStandardMaterial.roughness) is the opposite
-of `shininess`. Something that has a high roughness, like a baseball doesn't 
-have hard reflections where as something that's not rough, like a billiard ball
+of `shininess`. Something that has a high roughness, like a baseball doesn't
+have hard reflections whereas something that's not rough, like a billiard ball,
 is very shiny. Roughness goes from 0 to 1.
 is very shiny. Roughness goes from 0 to 1.
 
 
 The other setting, [`metalness`](MeshStandardMaterial.metalness), says
 The other setting, [`metalness`](MeshStandardMaterial.metalness), says
@@ -177,7 +177,7 @@ across and `metalness` from 0 to 1 down.
 <div data-diagram="MeshStandardMaterial" style="min-height: 400px"></div>
 <div data-diagram="MeshStandardMaterial" style="min-height: 400px"></div>
 
 
 The `MeshPhysicalMaterial` is same as the `MeshStandardMaterial` but it
 The `MeshPhysicalMaterial` is same as the `MeshStandardMaterial` but it
-adds a `clearCoat` parameter that goes from 0 to 1 for how much to 
+adds a `clearCoat` parameter that goes from 0 to 1 for how much to
 apply a clearcoat gloss layer and a `clearCoatRoughness` parameter
 apply a clearcoat gloss layer and a `clearCoatRoughness` parameter
 that specifies how rough the gloss layer is.
 that specifies how rough the gloss layer is.
 
 
@@ -187,7 +187,7 @@ Here's the same grid of `roughness` by `metalness` as above but with
 <div data-diagram="MeshPhysicalMaterial" style="min-height: 400px"></div>
 <div data-diagram="MeshPhysicalMaterial" style="min-height: 400px"></div>
 
 
 The various standard materials progress from fastest to slowest
 The various standard materials progress from fastest to slowest
-`MeshBasicMaterial` ➡ `MeshLambertMaterial` ➡ `MeshPhongMaterial` ➡ 
+`MeshBasicMaterial` ➡ `MeshLambertMaterial` ➡ `MeshPhongMaterial` ➡
 `MeshStandardMaterial` ➡ `MeshPhysicalMaterial`. The slower materials
 `MeshStandardMaterial` ➡ `MeshPhysicalMaterial`. The slower materials
 can make more realistic looking scenes but you might need to design
 can make more realistic looking scenes but you might need to design
 your code to use the faster materials on low powered or mobile machines.
 your code to use the faster materials on low powered or mobile machines.
@@ -195,7 +195,7 @@ your code to use the faster materials on low powered or mobile machines.
 There are 3 materials that have special uses. `ShadowMaterial`
 There are 3 materials that have special uses. `ShadowMaterial`
 is used to get the data created from shadows. We haven't
 is used to get the data created from shadows. We haven't
 covered shadows yet. When we do we'll use this material
 covered shadows yet. When we do we'll use this material
-to take a peak at what's happening behind the scenes.
+to take a peek at what's happening behind the scenes.
 
 
 The `MeshDepthMaterial` renders the depth of each pixel where
 The `MeshDepthMaterial` renders the depth of each pixel where
 pixels at negative [`near`](PerspectiveCamera.near) of the camera are 0 and negative [`far`](PerspectiveCamera.far) are 1. Certain special effects can use this data which we'll
 pixels at negative [`near`](PerspectiveCamera.near) of the camera are 0 and negative [`far`](PerspectiveCamera.far) are 1. Certain special effects can use this data which we'll
@@ -208,8 +208,8 @@ get into at another time.
 </div>
 </div>
 
 
 The `MeshNormalMaterial` will show you the *normals* of geometry.
 The `MeshNormalMaterial` will show you the *normals* of geometry.
-*Normals* are the direction a particular triangle or pixel faces. 
-`MeshNormalMaterial` draws the view space normals. (the normals relative to the camera).
+*Normals* are the direction a particular triangle or pixel faces.
+`MeshNormalMaterial` draws the view space normals (the normals relative to the camera).
 <span class="color:red;">x is red</span>,
 <span class="color:red;">x is red</span>,
 <span class="color:green;">y is green</span>, and
 <span class="color:green;">y is green</span>, and
 <span class="color:blue;">z is blue</span> so things facing
 <span class="color:blue;">z is blue</span> so things facing
@@ -221,7 +221,7 @@ to the right will be red, up will be green, and toward the screen will be blue.
   </div>
   </div>
 </div>
 </div>
 
 
-`ShaderMaterial` is for making custom materials using three.js shader
+`ShaderMaterial` is for making custom materials using the three.js shader
 system. `RawShaderMaterial` is for making entirely custom shaders with
 system. `RawShaderMaterial` is for making entirely custom shaders with
 no help from three.js. Both of these topics are large and will be
 no help from three.js. Both of these topics are large and will be
 covered later.
 covered later.
@@ -231,7 +231,7 @@ Most materials share a bunch of settings all defined by `Material`.
 for all of them but let's go over two of the most commonly used
 for all of them but let's go over two of the most commonly used
 properties.
 properties.
 
 
-[`flatShading`](Material.flatShading): 
+[`flatShading`](Material.flatShading):
 whether or not the object looks faceted or smooth. default = `false`.
 whether or not the object looks faceted or smooth. default = `false`.
 
 
 <div class="spread">
 <div class="spread">
@@ -268,14 +268,14 @@ Here are 6 planes drawn with `THREE.FrontSide` and `THREE.DoubleSide`.
 There's really a lot to consider with materials and we actually still
 There's really a lot to consider with materials and we actually still
 have a bunch more to go. In particular we've mostly ignored textures
 have a bunch more to go. In particular we've mostly ignored textures
 which open up a whole slew of options. Before we cover textures though
 which open up a whole slew of options. Before we cover textures though
-we need to take a break and cover 
+we need to take a break and cover
 [setting up your development environment](threejs-setup.html)
 [setting up your development environment](threejs-setup.html)
 
 
 <div class="threejs_bottombar">
 <div class="threejs_bottombar">
 <h3>material.needsUpdate</h3>
 <h3>material.needsUpdate</h3>
 <p>
 <p>
 This topic rarely affects most three.js apps but just as an FYI...
 This topic rarely affects most three.js apps but just as an FYI...
-Three.js applies material settings when a material is used where "used" 
+Three.js applies material settings when a material is used where "used"
 means "something is rendered that uses the material". Some material settings are
 means "something is rendered that uses the material". Some material settings are
 only applied once as changing them requires lots of work by three.js.
 only applied once as changing them requires lots of work by three.js.
 In those cases you need to set <code>material.needsUpdate = true</code> to tell
 In those cases you need to set <code>material.needsUpdate = true</code> to tell
@@ -285,10 +285,10 @@ using the material are:
 </p>
 </p>
 <ul>
 <ul>
   <li><code>flatShading</code></li>
   <li><code>flatShading</code></li>
-  <li>adding or removing a texture.
+  <li>adding or removing a texture
     <p>
     <p>
-    Changing a texture is ok, but if want switch from using no texture 
-    to using a texture or from using a texture to using no texture 
+    Changing a texture is ok, but if want to switch from using no texture
+    to using a texture or from using a texture to using no texture
     then you need to set <code>needsUpdate = true</code>.
     then you need to set <code>needsUpdate = true</code>.
     </p>
     </p>
     <p>In the case of going from texture to no-texture it is often
     <p>In the case of going from texture to no-texture it is often