typos

threejs/lessons/threejs-fundamentals.md

@@ -33,7 +33,7 @@ The first thing we need is a `<canvas>` tag so
 </body>
 ```
 
-Three.js will draw into that canvas so we need to look it
+Three.js will draw into that canvas so we need to look it up
 and pass it to three.js.
 
 ```
@@ -48,19 +48,19 @@ function main() {
 ```
 
 Note there are some esoteric details here. If you don't pass a canvas
-into three.js it will create on for you but then you have to add it
+into three.js it will create one for you but then you have to add it
 to your document. Where to add it may change depending on your use case
 and you'll have to change your code so I find that passing a canvas
 to three.js feels a little more flexible. I can put the canvas anywhere
 and the code will find it where as if I had code to insert the canvas
-into do the document I'd likely have to change that code if my usecase
+into to the document I'd likely have to change that code if my use case
 changed.
 
 After we look up the canvas we create a `WebGLRenderer`. The renderer
 is the thing responsible for actually taking all the data you provide
-and to render it to the canvas. In the past there have been other renderers
-like `CSSRenderer`, a `CanvasRenderer` and in the future there may be
-`WebGL2Renderer` or `WebGPURenderer`. For now there's the `WebGLRednerer`
+and rendering it to the canvas. In the past there have been other renderers
+like `CSSRenderer`, a `CanvasRenderer` and in the future there may be a
+`WebGL2Renderer` or `WebGPURenderer`. For now there's the `WebGLRenderer`
 that uses WebGL to render 3D to the canvas.
 
 Next up we need a camera.
@@ -112,10 +112,10 @@ Here's what we're aiming for.
 
 In the diagram above we can see our camera is at `z = 2`. It's looking
 down the -Z axis. Our frustum starts 0.1 units from the front of the camera
-and goes to 5 units in front of the camera. Because we are looking down
+and goes to 5 units in front of the camera. Because in this diagram we are looking down,
 the field of view is affected by the aspect. Our canvas is twice as wide
 as it is tall so across view the field of view will be much wider than
-our specified 75 degrees.
+our specified 75 degrees which is the vertical field of view.
 
 Next we make a `Scene`. A `Scene` in three.js is a form of scene graph.
 Anything you want three.js to draw needs to be added to the scene. We'll
@@ -140,7 +140,7 @@ We then create a basic material and set its color. Colors can
 be specified using standard CSS style 6 digit hex color values.
 
 ```
-const material = new THREE.MeshPhongMaterial({color: 0x44aa88});
+const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
 ```
 
 We then create a `Mesh`. A `Mesh` in three represents the combination
@@ -170,14 +170,12 @@ Here's a working exmaple
 
 {{{example url="../threejs-fundamentals.html" }}}
 
-It's kind of hard to tell that is a 3D box since we're viewing
-it directly down the -Z axis and the box itself is axis aligned
+It's kind of hard to tell that is a 3D cube since we're viewing
+it directly down the -Z axis and the cube itself is axis aligned
 so we're only seeing a single face.
 
 Let's animate it spinning and hopefully that will make
-it clear it's being drawn in 3D.
-
-To animate it we'll render inside a render loop using
+it clear it's being drawn in 3D. To animate it we'll render inside a render loop using
 [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).
 
 Here's our loop
@@ -204,7 +202,7 @@ page the browser will re-render the page. In our case we are calling three's
 
 `requestAnimationFrame` passes the time since the page started rendering to
 the our function. That time is passed in milliseconds. I find it's much
-easier to work with seconds here we're converting that to seconds.
+easier to work with seconds so here we're converting that to seconds.
 
 We then set the cube's X and Y rotation to the current time. These rotations
 are in [radians](https://en.wikipedia.org/wiki/Radian). There are 2 pi radians
@@ -218,7 +216,7 @@ Outside the loop we call `requestAnimationFrame` one time to start the loop.
 
 {{{example url="../threejs-fundamentals-with-animation.html" }}}
 
-It's still hard to see the 3d. What would help is to add some lighting
+It's a little better but it's still hard to see the 3d. What would help is to add some lighting
 so let's add a light. There are many kinds of lights in three.js which
 we'll go over in a future article. For now let's create a directional
 light.
@@ -230,8 +228,8 @@ scene.add(light);
 ```
 
 Directional lights have a position and a target. Both default to 0, 0, 0. In our
-case we're setting the light's position to -1, 2, 4 so it's slightly on the left
-above and behind our camera. The target is still 0, 0, 0 so it will shine
+case we're setting the light's position to -1, 2, 4 so it's slightly on the left,
+above, and behind our camera. The target is still 0, 0, 0 so it will shine
 toward the origin.
 
 We also need to change the material. The `MeshBasicMaterial` is not affected by
@@ -256,7 +254,7 @@ material so each cube can be a different color.
 First we'll make a function that creates a new material
 with the specified color. Then it creates a mesh using
 the specified geometry and adds it to the scene and
-sets it's X position.
+sets its X position.
 
 ```
 function makeInstance(geometry, color, x) {

threejs/lessons/threejs-responsive.md

@@ -24,7 +24,7 @@ no size
 
 That canvas defaults to 300x150 css pixels in size.
 
-In the web platform the recommend way to size set the size
+In the web platform the recommended way to set the size
 of something is to use CSS.
 
 Let's make the canvas fill the page by adding CSS
@@ -44,15 +44,15 @@ html, body {
 ```
 
 In HTML the body has a margin of 5px pixels by default so setting the
-margin to 0 removes margin. Setting the html and body height to 100%
+margin to 0 removes the margin. Setting the html and body height to 100%
 makes them fill the window. Otherwise they are only as large
 as the content that fills them.
 
 Next we tell the `id=c` element to be
-100% the size of it's container which in this case is the body of
+100% the size of its container which in this case is the body of
 the document.
 
-Finally we set it's `display` mode to `block`. The canvas's
+Finally we set its `display` mode to `block`. A canvas's
 default display mode is `inline`. Inline
 elements can end up adding whitespace to what is displayed. By
 setting the canvas to `block` that issue goes away.
@@ -64,7 +64,7 @@ Here's the result
 You can see the canvas is now filling the page but there are 2
 problems. One our cubes are stretched. They are not cubes they
 are more like boxes. Too tall or too wide. Open the
-example in it's own window and resize it. You'll see how
+example in its own window and resize it. You'll see how
 the cubes get stretched wide and tall.
 
 <img src="resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center">
@@ -93,7 +93,7 @@ function render(time) {
   ...
 ```
 
-Now the cubes should stop being stretched.
+Now the cubes should stop being distorted.
 
 {{{example url="../threejs-responsive-update-camera.html" }}}
 
@@ -105,17 +105,17 @@ They stay the correct aspect regardless of window size.
 
 Now let's fix the blockiness.
 
-Canvas's have 2 sizes. One size is the size the canvas is displayed
-in the page. That's what we set with CSS. The other size is the
+Canvas elements have 2 sizes. One size is the size the canvas is displayed
+on the page. That's what we set with CSS. The other size is the
 number of pixels in the canvas itself. This is no different than an image.
-For example we might have a 128x64 image and using
-css we might display as 400x200
+For example we might have a 128x64 pixel image and using
+css we might display as 400x200 pixels.
 
 ```
 <img src="some128x64image.jpg" style="width:400px; height:200px">
 ```
 
-A canvas's internal size, its resolution, is often called it's drawingbuffer size.
+A canvas's internal size, its resolution, is often called its drawingbuffer size.
 In three.js we can set the canvas's drawingbuffer size by calling `renderer.setSize`.
 What size should we pick? The most obvious answer is "the same size the canvas is displayed".
 Again, to do that we can look at the canvas's `clientWidth` and `clientHeight`
@@ -145,8 +145,8 @@ Once we know if we need to resize or not we then call `renderer.setSize` and
 pass in the new width and height. It's important to pass `false` at the end.
 `render.setSize` by default sets the canvas's CSS size but doing so is not
 what we want. We want the browser to continue to work how it does for all other
-elements which is to use CSS to determine the size of the element. We don't
-want canvases used by three to be different.
+elements which is to use CSS to determine the display size of the element. We don't
+want canvases used by three to be different than other elements.
 
 Note that our function returns true if the canvas was resized. We can use
 this to check if there are other things we should update. Let's modify
@@ -171,7 +171,7 @@ returns `true`.
 
 {{{example url="../threejs-responsive.html" }}}
 
-It should now render with the a resolution that matches the display
+It should now render with a resolution that matches the display
 size of the canvas.
 
 To make the point about letting CSS handle the resizing let's take
@@ -184,7 +184,7 @@ Let's put our cubes in the middle of a paragraph of text.
 {{{example url="../threejs-responsive-paragraph.html" startPane="html" }}}
 
 and here's our same code used in an editor style layout
-where the control area can be resized
+where the control area on the right can be resized.
 
 {{{example url="../threejs-responsive-editor.html" startPane="html" }}}
 
@@ -198,9 +198,9 @@ That's most Mac's now a days and many windows machines
 as well as pretty much all smartphones.
 
 The way this works in the browser is they use
-use CSS pixels to set the sizes which are suppose to be the same
+CSS pixels to set the sizes which are suppose to be the same
 regardless of how high res the display is. The browser
-will the just render everything with more detail but the
+will the just render text with more detail but the
 same physical size.
 
 There are various ways to handle HD-DPI with three.js.
@@ -212,7 +212,7 @@ less power than desktops, at least as of 2018, and yet
 mobile phones often have very high resolution displays.
 The current top of the line phones have a HD-DPI ratio
 of 3x meaning for every one pixel from a non-HD-DPI display
-those phones have 9 pixels. That means the have to do 9x
+those phones have 9 pixels. That means they have to do 9x
 the rendering.
 
 Computing 9x the pixels is a lot of work so if we just
@@ -223,7 +223,7 @@ For any heavy three.js app that's probably what you want
 otherwise you're likely to get a slow framerate.
 
 That said if you actually do want to render at the resolution
-of the device there are a couple of ways to do this in three.js
+of the device there are a couple of ways to do this in three.js.
 
 One is to tell three.js a resolution multiplier using `renderer.setPixelRatio`.
 You ask the browser what the multiplier is from CSS pixels to device pixels
@@ -255,7 +255,7 @@ I prefer this second way. Why? Because it means I get what I ask for.
 There are many cases when using three.js where we need to know the actual
 size of the canvas's drawingBuffer. For example when making a post processing filter,
 or if we are making a shader that accesses `gl_FragCoord`, etc...
-By doing it oursevles we always know the size uses is the size we requested.
+By doing it oursevles we always know the size being used is the size we requested.
 There is no special case where magic is happening behind the scenes.
 
 Here's an example using the code above.

threejs/threejs-responsive-editor.html

@@ -16,6 +16,8 @@
       height: 100vh;
     }
     #controls {
+      background: #AAA;
+      padding: 5px;
     }
     #c {
       width: 100%;