Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

add language tags to code blocks

Gregg Tavares 6 years ago
parent
b705fa366f
commit
b6b702c50b
17 changed files with 257 additions and 259 deletions
Split View Show Diff Stats
  1. 22 22
      threejs/lessons/threejs-cameras.md
  2. 16 16
      threejs/lessons/threejs-debugging-javascript.md
  3. 8 8
      threejs/lessons/threejs-fog.md
  4. 16 16
      threejs/lessons/threejs-fundamentals.md
  5. 29 29
      threejs/lessons/threejs-lights.md
  6. 23 23
      threejs/lessons/threejs-load-gltf.md
  7. 22 22
      threejs/lessons/threejs-load-obj.md
  8. 4 4
      threejs/lessons/threejs-materials.md
  9. 19 19
      threejs/lessons/threejs-multiple-scenes.md
  10. 15 15
      threejs/lessons/threejs-picking.md
  11. 13 13
      threejs/lessons/threejs-prerequisites.md
  12. 8 8
      threejs/lessons/threejs-primitives.md
  13. 6 7
      threejs/lessons/threejs-rendertargets.md
  14. 7 7
      threejs/lessons/threejs-responsive.md
  15. 11 11
      threejs/lessons/threejs-scenegraph.md
  16. 21 21
      threejs/lessons/threejs-shadows.md
  17. 17 18
      threejs/lessons/threejs-textures.md

+ 22 - 22
threejs/lessons/threejs-cameras.md
View File 

@@ -44,7 +44,7 @@ To do that we'll make a `MinMaxGUIHelper` for the `near` and `far` settings so `
 
 is always greater than `near`. It will have `min` and `max` properties that dat.GUI 
 will adjust. When adjusted they'll set the 2 properties we specify.
 
 
-```javascript
 
+```js
 
 class MinMaxGUIHelper {
 
   constructor(obj, minProp, maxProp, minDif) {
 
     this.obj = obj;
 
@@ -71,7 +71,7 @@ class MinMaxGUIHelper {
 
 
 Now we can setup our GUI like this
 
 
-```javascript
 
+```js
 
 function updateCamera() {
 
   camera.updateProjectionMatrix();
 
 }
 
@@ -133,7 +133,7 @@ the canvas
 
 
 Then in our code we'll add a `CameraHelper`. A `CameraHelper` draws the frustum for a `Camera`
 
 
-```javascript
 
+```js
 
 const cameraHelper = new THREE.CameraHelper(camera);
 
 
 ...
 
@@ -143,7 +143,7 @@ scene.add(cameraHelper);
 
 
 Now let's look up the 2 view elements.
 
 
-```javascript
 
+```js
 
 const view1Elem = document.querySelector('#view1'); 
 const view2Elem = document.querySelector('#view2');
 
 ```
 
@@ -151,7 +151,7 @@ const view2Elem = document.querySelector('#view2');
 
 And we'll set our existing `OrbitControls` to respond to the first
 
 view element only.
 
 
-```javascript
 
+```js
 
 -const controls = new THREE.OrbitControls(camera, canvas);
 
 +const controls = new THREE.OrbitControls(camera, view1Elem);
 
 ```
 
@@ -160,7 +160,7 @@ Let's make a second `PerspectiveCamera` and a second `OrbitControls`.
 
 The second `OrbitControls` is tied to the second camera and gets input
 
 from the second view element.
 
 
-```
 
+```js
 
 const camera2 = new THREE.PerspectiveCamera(
 
   60,  // fov
 
   2,   // aspect
 
@@ -182,7 +182,7 @@ Here is a function that given an element will compute the rectangle
 
 of that element that overlaps the canvas. It will then set the scissor
 
 and viewport to that rectangle and return the aspect for that size.
 
 
-```javascript
 
+```js
 
 function setScissorForElement(elem) {
 
   const canvasRect = canvas.getBoundingClientRect();
 
   const elemRect = elem.getBoundingClientRect();
 
@@ -207,7 +207,7 @@ function setScissorForElement(elem) {
 
 
 And now we can use that function to draw the scene twice in our `render` function
 
 
-```javascript
 
+```js
 
   function render() {
 
 
 -    if (resizeRendererToDisplaySize(renderer)) {
 
@@ -270,7 +270,7 @@ second view to dark blue just to make it easier to distinguish the two views.
 
 We can also remove our `updateCamera` code since we're updating everything
 
 in the `render` function.
 
 
-```javascript
 
+```js
 
 -function updateCamera() {
 
 -  camera.updateProjectionMatrix();
 
 -}
 
@@ -311,7 +311,7 @@ and slowly expand as they approach `far`.
 
 Starting with the top example, let's change the code to insert 20 spheres in a
 
 row.
 
 
-```javascript
 
+```js
 
 {
 
   const sphereRadius = 3;
 
   const sphereWidthDivisions = 32;
 
@@ -330,7 +330,7 @@ row.
 
 
 and let's set `near` to 0.00001
 
 
-```javascript
 
+```js
 
 const fov = 45;
 
 const aspect = 2;  // the canvas default
 
 -const near = 0.1;
 
@@ -341,7 +341,7 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
 
 We also need to tweak the GUI code a little to allow 0.00001 if the value is edited
 
 
-```javascript
 
+```js
 
 -gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
 
 +gui.add(minMaxGUIHelper, 'min', 0.00001, 50, 0.00001).name('near').onChange(updateCamera);
 
 ```
 
@@ -361,7 +361,7 @@ One solution is to tell three.js use to a different method to compute which
 
 pixels are in front and which are behind. We can do that by enabling 
 `logarithmicDepthBuffer` when we create the `WebGLRenderer`
 
 
-```javascript
 
+```js
 
 -const renderer = new THREE.WebGLRenderer({canvas: canvas});
 
 +const renderer = new THREE.WebGLRenderer({
 
 +  canvas: canvas,
 
@@ -404,7 +404,7 @@ in the first view.
 
 
 First let's setup an `OrthographicCamera`.
 
 
-```javascript
 
+```js
 
 const left = -1;
 
 const right = 1;
 
 const top = 1;
 
@@ -422,7 +422,7 @@ to make it easy to adjust how many units are actually shown by the camera.
 
 
 Let's add a GUI setting for `zoom`
 
 
-```javascript
 
+```js
 
 const gui = new dat.GUI();
 
 +gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
 
 ```
 
@@ -434,7 +434,7 @@ a mouse will zoom via the `OrbitControls`.
 
 Last we just need to change the part that renders the left
 
 side to update the `OrthographicCamera`.
 
 
-```javascript
 
+```js
 
 {
 
   const aspect = setScissorForElement(view1Elem);
 
 
@@ -465,7 +465,7 @@ one unit in the camera you could do something like
 
 To put the origin at the center and have 1 pixel = 1 three.js unit
 
 something like
 
 
-```javascript
 
+```js
 
 camera.left = -canvas.width / 2;
 
 camera.right = canvas.width / 2;
 
 camera.top = canvas.heigth / 2;
 
@@ -478,7 +478,7 @@ camera.zoom = 1;
 
 Or if we wanted the origin to be in the top left just like a 
 2D canvas we could use this
 
 
-```javascript
 
+```js
 
 camera.left = 0;
 
 camera.right = canvas.width;
 
 camera.top = 0;
 
@@ -492,7 +492,7 @@ In which case the top left corner would be 0,0 just like a 2D canvas
 
 
 Let's try it! First let's set the camera up
 
 
-```javascript
 
+```js
 
 const left = 0;
 
 const right = 300;  // default canvas size
 
 const top = 0;
 
@@ -507,7 +507,7 @@ Then let's load 6 textures and make 6 planes, one for each texture.
 
 We'll parent each plane to a `THREE.Object3D` to make it easy to offset
 
 the plane so it's center appears to be at it's top left corner.
 
 
-```javascript
 
+```js
 
 const loader = new THREE.TextureLoader();
 
 const textures = [
 
   loader.load('resources/images/flower-1.jpg'),
 
@@ -538,7 +538,7 @@ const planes = textures.map((texture) => {
 
 and we need to update the camera if the size of the canvas
 
 changes.
 
 
-```javascript
 
+```js
 
 function render() {
 
 
   if (resizeRendererToDisplaySize(renderer)) {
 
@@ -553,7 +553,7 @@ function render() {
 
 `planes` is an array of `THREE.Mesh`, one for each plane.
 
 Let's move them around based on the time.
 
 
-```javascript
 
+```js
 
 function render(time) {
 
   time *= 0.001;  // convert to seconds;

+ 16 - 16
threejs/lessons/threejs-debugging-javascript.md
View File 

@@ -75,14 +75,14 @@ Then pick "Disable Cache (while DevTools is open)".
 
 Inside all devtools is a *console*. It shows warnings and error messages.
 
 You can print your own info to the console with with `console.log` as in
 
 
-```
 
+```js
 
 console.log(someObject.position.x, someObject.position.y, someObject.position.z);
 
 ```
 
 
 Even cooler, if you log an object you can inspect it. For example if we log
 
 the root scene object from [the gLTF article](threejs-load-gltf.html)
 
 
-```
 
+```js
 
   {
 
     const gltfLoader = new THREE.GLTFLoader();
 
     gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
 
@@ -105,7 +105,7 @@ and put data in them.
 
 
 The most obvious way is to make some HTML elements
 
 
-```
 
+```html
 
 <canvas id="c"></canvas>
 
 +<div id="debug">
 
 +  <div>x:<span id="x"></span></div>
 
@@ -117,7 +117,7 @@ The most obvious way is to make some HTML elements
 
 Style them so they stay on top of the canvas. (assuming your canvas
 
 fills the page)
 
 
-```
 
+```html
 
 <style>
 
 #debug {
 
   position: absolute;
 
@@ -133,7 +133,7 @@ fills the page)
 
 
 And then looking the elements up and setting their content.
 
 
-```
 
+```js
 
 // at init time
 
 const xElem = document.querySelector('#x');
 
 const yElem = document.querySelector('#y');
 
@@ -158,7 +158,7 @@ than making an element per piece of data above.
 
 
 For example let's change the HTML from above to just this
 
 
-```
 
+```html
 
 <canvas id="c"></canvas>
 
 <div id="debug">
 
   <pre></pre>
 
@@ -167,7 +167,7 @@ For example let's change the HTML from above to just this
 
 
 And let's make simple class to manage this *clear back buffer*.
 
 
-```
 
+```js
 
 class ClearingLogger {
 
   constructor(elem) {
 
     this.elem = elem;
 
@@ -188,7 +188,7 @@ one of the examples from the article on [making things responsive](threejs-respo
 
 
 Here's the code that adds a new `Mesh` everytime we click the mouse
 
 
-```
 
+```js
 
 const geometry = new THREE.SphereBufferGeometry();
 
 const material = new THREE.MeshBasicMaterial({color: 'red'});
 
 
@@ -218,7 +218,7 @@ canvas.addEventListener('click', createThing);
 
 And here's the code that moves the meshes we created, logs them,
 
 and removes them when their timer has run out
 
 
-```
 
+```js
 
 const logger = new ClearingLogger(document.querySelector('#debug pre'));
 
 
 let then = 0;
 
@@ -275,7 +275,7 @@ the debug stuff only shows up if we put `?debug=true` in the URL.
 
 
 First we need some code to parse the query string
 
 
-```
 
+```js
 
 /**
 
   * Returns the query parameters as a key/value object. 
   * Example: If the query parameters are
 
@@ -303,7 +303,7 @@ function getQuery() {
 
 
 Then we might make the debug element not show by default
 
 
-```
 
+```html
 
 <canvas id="c"></canvas>
 
 +<div id="debug" style="display: none;">
 
   <pre></pre>
 
@@ -313,7 +313,7 @@ Then we might make the debug element not show by default
 
 Then in the code we read the params and choose to unhide the
 
 debug info if and only if `?debug=true` is passed in
 
 
-```
 
+```js
 
 const query = getQuery();
 
 const debug = query.debug === 'true';
 
 const logger = debug
 
@@ -326,7 +326,7 @@ if (debug) {
 
 
 We also made a `DummyLogger` that does nothing and chose to use it if `?debug=true` has not been passed in.
 
 
-```
 
+```js
 
 class DummyLogger {
 
   log() {}
 
   render() {}
 
@@ -377,7 +377,7 @@ As an example when I first started making the path for the [article about loadin
 
 
 I then used that curve to move the cars like this
 
 
-```
 
+```js
 
 curve.getPointAt(zeroToOnePointOnCurve, car.position);
 
 ```
 
 
@@ -415,7 +415,7 @@ THREE.js to step through the code and see what is going on.
 
 
 I see this pattern often
 
 
-```
 
+```js
 
 function render() {
 
    requestAnimationFrame(render);
 
 
@@ -429,7 +429,7 @@ requestAnimationFrame(render);
 
 I'd suggest that putting the call to `requestAnimationFrame` at
 
 the bottom as in
 
 
-```
 
+```js
 
 function render() {
 
    // -- do stuff --

+ 8 - 8
threejs/lessons/threejs-fog.md
View File 

@@ -21,7 +21,7 @@ There's also `FogExp2` which grows expotentially with distance from the camera.
 
 
 To use either type of fog you create one and and assign it to the scene as in
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 {
 
   const color = 0xFFFFFF;  // white
 
@@ -33,7 +33,7 @@ const scene = new THREE.Scene();
 
 
 or for `FogExp2` it would be
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 {
 
   const color = 0xFFFFFF;
 
@@ -67,7 +67,7 @@ The background color is set using the
 
 [`scene.background`](Scene.background)
 
 property. To pick a background color you attach a `THREE.Color` to it. For example
 
 
-```
 
+```js
 
 scene.background = new THREE.Color('#F00');  // red
 
 ```
 
 
@@ -86,7 +86,7 @@ Here is one of our previous examples with fog added. The only addition
 
 is right after setting up the scene we add the fog and set the scene's
 
 backgound color
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 
 +{
 
@@ -114,7 +114,7 @@ the fog's `near` and `far` properties but it's invalid to have
 
 can manipulate a `near` and `far` property but we'll make sure `near`
 
 is less than or equal to `far` and `far` is greater than or equal `near`.
 
 
-```
 
+```js
 
 // We use this class to pass to dat.gui
 
 // so when it manipulates near or far
 
 // near is never > far and far is never < near
 
@@ -141,7 +141,7 @@ class FogGUIHelper {
 
 
 We can then add it like this
 
 
-```
 
+```js
 
 {
 
   const near = 1;
 
   const far = 2;
 
@@ -176,7 +176,7 @@ dat.GUI is only manipulating a single value. Fortunately `THREE.Color`
 
 as a [`getHexString`](Color.getHexString) method
 
 we get use to easily get such a string, we just have to prepend a '#' to the front.
 
 
-```
 
+```js
 
 // We use this class to pass to dat.gui
 
 // so when it manipulates near or far
 
 // near is never > far and far is never < near
 
@@ -213,7 +213,7 @@ class FogGUIHelper {
 
 
 We then call `gui.addColor` to add a color UI for our helper's virutal property.
 
 
-```
 
+```js
 
 {
 
   const near = 1;
 
   const far = 2;

+ 16 - 16
threejs/lessons/threejs-fundamentals.md
View File 

@@ -29,7 +29,7 @@ so let's start with "Hello Cube!"
 
 
 The first thing we need is a `<canvas>` tag so
 
 
-```
 
+```html
 
 <body>
 
   <canvas id="c"></canvas>
 
 </body>
 
@@ -38,7 +38,7 @@ The first thing we need is a `<canvas>` tag so
 
 Three.js will draw into that canvas so we need to look it up
 
 and pass it to three.js.
 
 
-```
 
+```html
 
 <script>
 
 'use strict';
 
 
@@ -69,7 +69,7 @@ that uses WebGL to render 3D to the canvas.
 
 
 Next up we need a camera.
 
 
-```
 
+```js
 
 const fov = 75;
 
 const aspect = 2;  // the canvas default
 
 const near = 0.1;
 
@@ -106,7 +106,7 @@ The camera defaults to looking down the -Z axis with +Y up. We'll put our cube
 
 at the origin so we need to move the camera back a litte from the origin
 
 in order to see anything.
 
 
-```
 
+```js
 
 camera.position.z = 2;
 
 ```
 
 
@@ -125,7 +125,7 @@ Next we make a `Scene`. A `Scene` in three.js is the root of a form of scene gra
 
 Anything you want three.js to draw needs to be added to the scene. We'll
 
 cover more details of [how scenes work in a future article](threejs-scenegraph.html).
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 ```
 
 
@@ -133,7 +133,7 @@ Next up we create a `BoxGeometry` which contains the data for a box.
 
 Almost anything we want to display in Three.js needs geometry which defines
 
 the vertices that make up our 3D object.
 
 
-```
 
+```js
 
 const boxWidth = 1;
 
 const boxHeight = 1;
 
 const boxDepth = 1;
 
@@ -143,7 +143,7 @@ const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
 We then create a basic material and set its color. Colors can
 
 be specified using standard CSS style 6 digit hex color values.
 
 
-```
 
+```js
 
 const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
 
 ```
 
 
@@ -153,20 +153,20 @@ the object, shiny or flat, what color, what texture(s) to apply. Etc.)
 
 as well as the position, orientation, and scale of that
 
 object in the scene.
 
 
-```
 
+```js
 
 const cube = new THREE.Mesh(geometry, material);
 
 ```
 
 
 And finally we add that mesh to the scene
 
 
-```
 
+```js
 
 scene.add(cube);
 
 ```
 
 
 We can then render the scene by calling the renderer's render function
 
 and passing it the scene and the camera
 
 
-```
 
+```js
 
 renderer.render(scene, camera);
 
 ```
 
 
@@ -184,7 +184,7 @@ it clear it's being drawn in 3D. To animate it we'll render inside a render loop
 
 
 Here's our loop
 
 
-```
 
+```js
 
 function render(time) {
 
   time *= 0.001;  // convert time to seconds
 
 
@@ -225,7 +225,7 @@ 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.
 
 
-```
 
+```js
 
 {
 
   const color = 0xFFFFFF;
 
   const intensity = 1;
 
@@ -243,7 +243,7 @@ toward the origin.
 
 We also need to change the material. The `MeshBasicMaterial` is not affected by
 
 lights. Let's change it to a `MeshPhongMaterial` which is affected by lights.
 
 
-```
 
+```js
 
 -const material = new THREE.MeshBasicMaterial({color: 0x44aa88});  // greenish blue
 
 +const material = new THREE.MeshPhongMaterial({color: 0x44aa88});  // greenish blue
 
 ```
 
@@ -264,7 +264,7 @@ with the specified color. Then it creates a mesh using
 
 the specified geometry and adds it to the scene and
 
 sets its X position.
 
 
-```
 
+```js
 
 function makeInstance(geometry, color, x) {
 
   const material = new THREE.MeshPhongMaterial({color});
 
 
@@ -280,7 +280,7 @@ function makeInstance(geometry, color, x) {
 
 Then we'll call it 3 times with 3 different colors and X positions
 
 saving the `Mesh` instances in an array.
 
 
-```
 
+```js
 
 const cubes = [
 
   makeInstance(geometry, 0x44aa88,  0),
 
   makeInstance(geometry, 0x8844aa, -2),
 
@@ -291,7 +291,7 @@ const cubes = [
 
 Finally we'll spin all 3 cubes in our render function. We
 
 compute a slightly different rotation for each one.
 
 
-```
 
+```js
 
 function render(time) {
 
   time *= 0.001;  // convert time to seconds

+ 29 - 29
threejs/lessons/threejs-lights.md
View File 

@@ -13,7 +13,7 @@ Starting with one of our previous samples let's update the camera.
 
 We'll set the field of view to 45 degrees, the far plane to 100 units,
 
 and we'll move the camera 10 units up and 20 units back from the origin
 
 
-```javascript
 
+```js
 
 *const fov = 45;
 
 const aspect = 2;  // the canvas default
 
 const near = 0.1;
 
@@ -27,7 +27,7 @@ or *orbit* the camera around some point. The `OrbitControls` are
 
 an optional feature of three.js so first we need to include them
 
 in our page
 
 
-```javascript
 
+```html
 
 <script src="resources/threejs/r98/three.min.js"></script>
 
 +<script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
 ```
 
@@ -35,7 +35,7 @@ in our page
 
 Then we can use them. We pass the `OrbitControls` a camera to 
 control and the DOM element to use to get input events
 
 
-```javascript
 
+```js
 
 const controls = new THREE.OrbitControls(camera, canvas);
 
 controls.target.set(0, 5, 0);
 
 controls.update();
 
@@ -62,7 +62,7 @@ texture is a 2x2 pixel checkerboard, by repeating and setting the
 
 repeat to half the size of the plane each check on the checkerboard
 
 will be exactly 1 unit large;
 
 
-```javascript
 
+```js
 
 const planeSize = 40;
 
 
 const loader = new THREE.TextureLoader();
 
@@ -78,7 +78,7 @@ We then make a plane geometry, a material for the plane, and mesh
 
 to insert it in the scene. Planes default to being in the XY plane
 
 but the ground is in the XZ plane so we rotate it.
 
 
-```javascript
 
+```js
 
 const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
 
 const planeMat = new THREE.MeshPhongMaterial({
 
   map: texture,
 
@@ -91,7 +91,7 @@ scene.add(mesh);
 
 
 Let's add a cube and a sphere so we have 3 things to light including the plane
 
 
-```javascript
 
+```js
 
 {
 
   const cubeSize = 4;
 
   const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
@@ -118,7 +118,7 @@ Now that we have a scene to light up let's add lights!
 
 
 First let's make an `AmbientLight`
 
 
-```javascript
 
+```js
 
 const color = 0xFFFFFF;
 
 const intensity = 1;
 
 const light = new THREE.AmbientLight(color, intensity);
 
@@ -136,7 +136,7 @@ color.
 
 
 Here's the helper:
 
 
-```javascript
 
+```js
 
 class ColorGUIHelper {
 
   constructor(object, prop) {
 
     this.object = object;
 
@@ -153,7 +153,7 @@ class ColorGUIHelper {
 
 
 And here's our code setting up dat.GUI
 
 
-```javascript
 
+```js
 
 const gui = new dat.GUI();
 
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
 gui.add(light, 'intensity', 0, 2, 0.01);
 
@@ -187,7 +187,7 @@ the surface of the object is pointing down.
 
 
 Here's the new code
 
 
-```javascript
 
+```js
 
 -const color = 0xFFFFFF;
 
 +const skyColor = 0xB1E1FF;  // light blue
 
 +const groundColor = 0xB97A20;  // brownish orange
 
@@ -199,7 +199,7 @@ scene.add(light);
 
 
 Let's also update the dat.GUI code to edit both colors
 
 
-```javascript
 
+```js
 
 const gui = new dat.GUI();
 
 -gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
 +gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
 
@@ -222,7 +222,7 @@ other light or a substitute for an `AmbientLight`.
 
 Let's switch the code to a `DirectionalLight`.
 
 A `DirectionalLight` is often used to represent the sun.
 
 
-```javascript
 
+```js
 
 const color = 0xFFFFFF;
 
 const intensity = 1;
 
 const light = new THREE.DirectionalLight(color, intensity);
 
@@ -239,7 +239,7 @@ in the direction of its target.
 
 Let's make it so we can move the target by adding it to
 
 our GUI.
 
 
-```javascript
 
+```js
 
 const gui = new dat.GUI();
 
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
 gui.add(light, 'intensity', 0, 2, 0.01);
 
@@ -257,7 +257,7 @@ invisible parts of a scene. In this case we'll use the
 
 the light, and a line from the light to the target. We just
 
 pass it the light and add itd add it to the scene.
 
 
-```javascript
 
+```js
 
 const helper = new THREE.DirectionalLightHelper(light);
 
 scene.add(helper);
 
 ```
 
@@ -267,7 +267,7 @@ of the light and the target. To do this we'll make a function
 
 that given a `Vector3` will adjust its `x`, `y`, and `z` properties
 
 using `dat.GUI`.
 
 
-```javascript
 
+```js
 
 function makeXYZGUI(gui, vector3, name, onChangeFn) {
 
   const folder = gui.addFolder(name);
 
   folder.add(vector3, 'x', -10, 10).onChange(onChangeFn);
 
@@ -285,7 +285,7 @@ get called anytime dat.GUI updates a value.
 
 Then we can use that for both the light's position
 
 and the target's position like this
 
 
-```javascript
 
+```js
 
 +function updateLight{
 
 +  light.target.updateMatrixWorld();
 
 +  helper.update();
 
@@ -315,7 +315,7 @@ shooting out parallel rays of light.
 
 A `PointLight` is a light that sits at a point and shoots light
 
 in all directions from that point. Let's change the code.
 
 
-```javascript
 
+```js
 
 const color = 0xFFFFFF;
 
 const intensity = 1;
 
 -const light = new THREE.DirectionalLight(color, intensity);
 
@@ -328,7 +328,7 @@ scene.add(light);
 
 
 Let's also switch to a `PointLightHelper`
 
 
-```javascript
 
+```js
 
 -const helper = new THREE.DirectionalLightHelper(light);
 
 +const helper = new THREE.PointLightHelper(light);
 
 scene.add(helper);
 
@@ -336,7 +336,7 @@ scene.add(helper);
 
 
 and as there is no target the `onChange` function can be simpler.
 
 
-```javascript
 
+```js
 
 function updateLight{
 
 -  light.target.updateMatrixWorld();
 
   helper.update();
 
@@ -356,7 +356,7 @@ units away from the light.
 
 
 Let's setup the GUI so we can adjust the distance.
 
 
-```javascript
 
+```js
 
 const gui = new dat.GUI();
 
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
 gui.add(light, 'intensity', 0, 2, 0.01);
 
@@ -386,7 +386,7 @@ open toward the target.
 
 
 Modifying our `DirectionalLight` with helper from above
 
 
-```javascript
 
+```js
 
 const color = 0xFFFFFF;
 
 const intensity = 1;
 
 -const light = new THREE.DirectionalLight(color, intensity);
 
@@ -404,7 +404,7 @@ property in radians. We'll use our `DegRadHelper` from the
 
 [texture artcle](threejs-textures.html) to present a UI in
 
 degrees.
 
 
-```javascript
 
+```js
 
 gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle').onChange(updateLight);
 
 ```
 
 
@@ -415,7 +415,7 @@ inner code is the same size (0 = no difference) from the outer cone. When the
 
 outer cone. When `penumbra` is .5 then the light fades starting from 50% between
 
 the center of the outer cone.
 
 
-```javascript
 
+```js
 
 gui.add(light, 'penumbra', 0, 1, 0.01);
 
 ```
 
 
@@ -437,7 +437,7 @@ fluorescent light or maybe a frosted sky light in a ceiling.
 
 The `RectAreaLight` only works with the `MeshStandardMaterai` and the
 
 `MeshPhysicalMaterial` so let's change all our materials to `MeshStandardMaterial`
 
 
-```javascript
 
+```js
 
   ...
 
 
   const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
 
@@ -484,7 +484,7 @@ be sure to remember to include the extra data.
 
 
 Now we can create the light
 
 
-```javascript
 
+```js
 
 const color = 0xFFFFFF;
 
 *const intensity = 5;
 
 +const width = 12;
 
@@ -504,7 +504,7 @@ One thing to notice is that unlike the `DirectionalLight` and the `SpotLight` th
 
 Let's also adjust the GUI. We'll make it so we can rotate the light and adjust
 
 its `width` and `height`
 
 
-```javascript
 
+```js
 
 const gui = new dat.GUI();
 
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
 gui.add(light, 'intensity', 0, 10, 0.01);
 
@@ -536,7 +536,7 @@ Let's test that.
 
 
 First we'll turn on physically correct lights
 
 
-```javascript
 
+```js
 
 const renderer = new THREE.WebGLRenderer({canvas: canvas});
 
 +renderer.physicallyCorrectLights = true;
 
 ```
 
@@ -544,7 +544,7 @@ const renderer = new THREE.WebGLRenderer({canvas: canvas});
 
 Then we'll set the `power` to 800 lumens, the `decay` to 2, and
 
 the `distance` to `Infinity`.
 
 
-```javascript
 
+```js
 
 const color = 0xFFFFFF;
 
 const intensity = 1;
 
 const light = new THREE.PointLight(color, intensity);
 
@@ -555,7 +555,7 @@ light.distance = Infinity;
 
 
 and we'll add gui so we can change the `power` and `decay`
 
 
-```javascript
 
+```js
 
 const gui = new dat.GUI();
 
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
 gui.add(light, 'decay', 0, 4, 0.01);

+ 23 - 23
threejs/lessons/threejs-load-gltf.md
View File 

@@ -69,7 +69,7 @@ for loading .OBJ and replaced it with code for loading .GLTF
 
 
 The old .OBJ code was
 
 
-```
 
+```js
 
 const objLoader = new THREE.OBJLoader2();
 
 objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materials) => {
 
   materials.Material.side = THREE.DoubleSide;
 
@@ -84,7 +84,7 @@ objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materia
 
 
 The new .GLTF code is
 
 
-```
 
+```js
 
 {
 
   const gltfLoader = new THREE.GLTFLoader();
 
   const url = 'resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf';
 
@@ -99,7 +99,7 @@ I kept the auto framing code as before
 
 
 We also need to include the `GLTFLoader` and we can get rid of the `OBJLoader2`.
 
 
-```
 
+```html
 
 -<script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
 -<script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
 -<script src="resources/threejs/r98/js/loaders/MTLLoader.js"></script>
 
@@ -121,7 +121,7 @@ console.
 
 
 Here's the code to print out the scenegraph.
 
 
-```
 
+```js
 
 function dumpObject(obj, lines = [], isLast = true, prefix = '') {
 
   const localPrefix = isLast ? '└─' : '├─';
 
   lines.push(`${prefix}${prefix ? localPrefix : ''}${obj.name || '*no-name*'} [${obj.type}]`);
 
@@ -137,7 +137,7 @@ function dumpObject(obj, lines = [], isLast = true, prefix = '') {
 
 
 And I just called it right after loading the scene.
 
 
-```
 
+```js
 
 const gltfLoader = new THREE.GLTFLoader();
 
 gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
 
   const root = gltf.scene;
 
@@ -147,7 +147,7 @@ gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.glt
 
 
 [Running that](.../threejs-load-gltf-dump-scenegraph.html) I got this listing
 
 
-```
 
+```text
 
 OSG_Scene [Scene]
 
   └─RootNode_(gltf_orientation_matrix) [Object3D]
 
     └─RootNode_(model_correction_matrix) [Object3D]
 
@@ -191,7 +191,7 @@ OSG_Scene [Scene]
 
 From that we can see all the cars happen to be under parent
 
 called `"Cars"`
 
 
-```
 
+```text
 
 *          ├─Cars [Object3D]
 
           │ ├─CAR_03_1 [Object3D]
 
           │ │ └─CAR_03_1_World_ap_0 [Mesh]
 
@@ -207,7 +207,7 @@ all the children of the "Cars" node around their Y axis
 
 I looked up the "Cars" node after loading the scene
 
 and saved the result.
 
 
-```
 
+```js
 
 +let cars;
 
 {
 
   const gltfLoader = new THREE.GLTFLoader();
 
@@ -220,7 +220,7 @@ and saved the result.
 
 Then in the `render` function we can just set the rotation
 
 of each child of `cars`
 
 
-```
 
+```js
 
 +function render(time) {
 
 +  time *= 0.001;  // convert to seconds
 
 
@@ -267,7 +267,7 @@ Each type of car will work with the same adjustments.
 
 I wrote this code to go through each car, parent it to a new `Object3D`, parent that new `Object3D` to the scene, and apply some per car *type* settings to fix its orientation, and add
 
 the new `Object3D` a `cars` array.
 
 
-```
 
+```js
 
 -let cars;
 
 +const cars = [];
 
 {
 
@@ -320,7 +320,7 @@ Fortunately I was able to select just my path and export .OBJ checking "write nu
 
 Opening the .OBJ file I was able to get a list of points
 
 which I formated into this
 
 
-```
 
+```js
 
 const controlPoints = [
 
   [1.118281, 5.115846, -3.681386],
 
   [3.948875, 5.115846, -3.641834],
 
@@ -367,7 +367,7 @@ This will give us a curve like this
 
 
 Here's the code to make the curve 
 
-```
 
+```js
 
 let curve;
 
 let curveObject;
 
 {
 
@@ -426,7 +426,7 @@ the lines made by connecting those 250 points.
 
 Running [the example](../threejs-load-gltf-car-path.html) I didn't see the curve. To make it
 
 visible made it ignore the depth test and render last
 
 
-```
 
+```js
 
     curveObject = new THREE.Line(geometry, material);
 
 +    material.depthTest = false;
 
 +    curveObject.renderOrder = 1;
 
@@ -461,7 +461,7 @@ is less of an issue.
 
 Going back to the function we wrote above to dump the scene graph,
 
 let's dump the position, rotation, and scale of each node.
 
 
-```
 
+```js
 
 +function dumpVec3(v3, precision = 3) {
 
 +  return `${v3.x.toFixed(precision)}, ${v3.y.toFixed(precision)}, ${v3.z.toFixed(precision)}`;
 
 +}
 
@@ -487,7 +487,7 @@ function dumpObject(obj, lines, isLast = true, prefix = '') {
 
 
 And the result from [running it](.../threejs-load-gltf-dump-scenegraph-extra.html)
 
 
-```
 
+```text
 
 OSG_Scene [Scene]
 
   │   pos: 0.000, 0.000, 0.000
 
   │   rot: 0.000, 0.000, 0.000
 
@@ -531,7 +531,7 @@ all the major nodes and removed any transformations.
 
 
 All these nodes at the top
 
 
-```
 
+```text
 
 OSG_Scene [Scene]
 
   │   pos: 0.000, 0.000, 0.000
 
   │   rot: 0.000, 0.000, 0.000
 
@@ -568,7 +568,7 @@ Here's what I ended up with.
 
 First I adjusted the position of the curve and after I found values
 
 that seemd to work. I then hid it.
 
 
-```
 
+```js
 
 {
 
   const points = curve.getPoints(250);
 
   const geometry = new THREE.BufferGeometry().setFromPoints(points);
 
@@ -588,7 +588,7 @@ a position from 0 to 1 along the curve and compute a point in world space
 
 using the `curveObject` to transform the point. We then pick another point
 
 slightly further down the curve. We set the car's orientation using `lookAt` and put the car at the mid point between the 2 points.
 
 
-```
 
+```js
 
 // create 2 Vector3s we can use for path calculations
 
 const carPosition = new THREE.Vector3();
 
 const carTarget = new THREE.Vector3();
 
@@ -630,7 +630,7 @@ and when I ran it I found out for each type of car, their height above their ori
 
 are not consistently set and so I needed to offset each one
 
 a little.
 
 
-```
 
+```js
 
 const loadedCars = root.getObjectByName('Cars');
 
 const fixes = [
 
 -  { prefix: 'Car_08', rot: [Math.PI * .5, 0, Math.PI * .5], },
 
@@ -669,7 +669,7 @@ into our latest code.
 
 
 Then, after loading, we need to turn on shadows on all the objects.
 
 
-```
 
+```js
 
 {
 
   const gltfLoader = new THREE.GLTFLoader();
 
   gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
 
@@ -687,7 +687,7 @@ Then, after loading, we need to turn on shadows on all the objects.
 
 I then spent nearly 4 hours trying to figure out why the shadow helpers
 
 were not working. It was because I forgot to enable shadows with
 
 
-```
 
+```js
 
 renderer.shadowMap.enabled = true;
 
 ```
 
 
@@ -697,7 +697,7 @@ I then adjusted the values until our `DirectionLight`'s shadow camera
 
 had a frustum that covered the entire scene. These are the settings
 
 I ended up with.
 
 
-```
 
+```js
 
 {
 
   const color = 0xFFFFFF;
 
   const intensity = 1;
 
@@ -724,7 +724,7 @@ I ended up with.
 
 
 and I set the background color to light blue.
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 -scene.background = new THREE.Color('black');
 
 +scene.background = new THREE.Color('#DEFEFF');

+ 22 - 22
threejs/lessons/threejs-load-obj.md
View File 

@@ -44,7 +44,7 @@ that were being added to the scene.
 
 
 From that the first thing we need to do is include the `OBJLoader2` loader in our scene. The `OBJLoader2` also needs the `LoadingSupport.js` file so let's add both.
 
 
-```
 
+```html
 
 <script src="resources/threejs/r98/js/loaders/LoadingSupport.js"></script>
 
 <script src="resources/threejs/r98/js/loaders/OBJLoader2.js"></script>
 
 ```
 
@@ -53,7 +53,7 @@ Then to load the .OBJ file we create an instance of `OBJLoader2`,
 
 pass it the URL of our .OBJ file, and pass in a callback that adds
 
 the loaded model to our scene.
 
 
-```
 
+```js
 
 {
 
   const objLoader = new THREE.OBJLoader2();
 
   objLoader.load('resources/models/windmill/windmill.obj', (event) => {
 
@@ -82,7 +82,7 @@ Sometimes .OBJ files come with a .MTL file that defines
 
 materials. In our case the exporter also created a .MTL file.
 
 .MTL format is plain ASCII so it's easy to look at. Looking at it here
 
 
-```
 
+```mtl
 
 # Blender MTL File: 'windmill_001.blend'
 
 # Material Count: 2
 
 
@@ -143,7 +143,7 @@ Now that we have the textures available we can load the .MTL file.
 
 
 First we need to include the `MTLLoader`
 
 
-```
 
+```html
 
 <script src="resources/threejs/r98/three.min.js"></script>
 
 <script src="resources/threejs/r98/js/controls/OrbitControls.js"></script>
 
 <script src="resources/threejs/r98/js/loaders/LoaderSupport.js"></script>
 
@@ -153,7 +153,7 @@ First we need to include the `MTLLoader`
 
 
 Then we first load the .MTL file. When it's finished loading we set the just loaded materials on to the `OBJLoader2` itself and then load the .OBJ file.
 
 
-```
 
+```js
 
 {
 
 +  const objLoader = new THREE.OBJLoader2();
 
 +  objLoader.loadMtl('resources/models/windmill/windmill.mtl', null, (materials) => {
 
@@ -235,7 +235,7 @@ the surface.
 
 Looking at [the source for the MTLLoader](https://github.com/mrdoob/three.js/blob/1a560a3426e24bbfc9ca1f5fb0dfb4c727d59046/examples/js/loaders/MTLLoader.js#L432)
 
 it expects the keyword `norm` for normal maps so let's edit the .MTL file
 
 
-```
 
+```mtl
 
 # Blender MTL File: 'windmill_001.blend'
 
 # Material Count: 2
 
 
@@ -280,7 +280,7 @@ Searching the net I found this [CC-BY-NC](https://creativecommons.org/licenses/b
 
 
 It had a .OBJ version already available. Let's load it up (note I removed the .MTL loader for now)
 
 
-```
 
+```js
 
 -  objLoader.load('resources/models/windmill/windmill.obj', ...
 
 +  objLoader.load('resources/models/windmill-2/windmill.obj', ...
 
 ```
 
@@ -294,7 +294,7 @@ camera automatically.
 
 First off we can ask THREE.js to compute a box that contains the scene
 
 we just loaded and ask for its size and center
 
 
-```
 
+```js
 
 objLoader.load('resources/models/windmill_2/windmill.obj', (event) => {
 
   const root = event.detail.loaderRootNode;
 
   scene.add(root);
 
@@ -308,7 +308,7 @@ objLoader.load('resources/models/windmill_2/windmill.obj', (event) => {
 
 
 Looking in [the JavaScript console](threejs-debugging.html) I see
 
 
-```
 
+```js
 
 size 2123.6499788469982
 
 center p {x: -0.00006103515625, y: 770.0909731090069, z: -3.313507080078125}
 
 ```
 
@@ -347,7 +347,7 @@ given we know the field of view for the frustum and we know the size of the box
 
 
 Based on that diagram the formula for computing distance is
 
 
-```
 
+```js
 
 distance = halfSizeToFitOnScreen / tangent(halfFovY)
 
 ```
 
 
@@ -355,7 +355,7 @@ Let's translate that to code. First let's make a function that will compute `dis
 
 camera that `distance` units from the center of the box. We'll then point the
 
 camera at the `center` of the box.
 
 
-```
 
+```js
 
 function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
 
   const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
 
   const halfFovY = THREE.Math.degToRad(camera.fov * .5);
 
@@ -386,7 +386,7 @@ and used that as `sizeToFitOnScreen` then the math would make the box fit perfec
 
 the frustum. We want a little extra space above and below so we'll pass in a slightly 
 larger size. 
 
-```
 
+```js
 
 {
 
   const objLoader = new THREE.OBJLoader2();
 
   objLoader.load('resources/models/windmill_2/windmill.obj', (event) => {
 
@@ -431,7 +431,7 @@ the camera is from the center. All we need to do to do that is zero out the `y`
 
 of the vector from the box to the camera. Then, when we normalize that vector it will
 
 become a vector parallel to the XZ plane. In otherwords parallel to the ground.
 
 
-```
 
+```js
 
 -// compute a unit vector that points in the direction the camera is now
 
 -// from the center of the box
 
 -const direction = (new THREE.Vector3()).subVectors(camera.position, boxCenter).normalize();
 
@@ -453,7 +453,7 @@ Since the windmill is over 2000 units big let's change the size of the ground pl
 
 something more fitting. We also need to adjust the repeat otherwise our checkerboard
 
 will be so fine we won't even be able to see it unless we zoom way way in.
 
 
-```
 
+```js
 
 -const planeSize = 40;
 
 +const planeSize = 4000;
 
 
@@ -474,7 +474,7 @@ and now we can see this windmill
 
 Let's add the materials back. Like before there is a .MTL file that references
 
 some textures but looking at the files I quickly see an issue.
 
 
-```
 
+```shell
 
  $ ls -l windmill
 
  -rw-r--r--@ 1 gregg  staff       299 May 20  2009 windmill.mtl
 
  -rw-r--r--@ 1 gregg  staff    142989 May 20  2009 windmill.obj
 
@@ -507,7 +507,7 @@ Loading the files up they were each 2048x2048. That seemed like a waste to me bu
 
 course it depends on your use case. I made them each 1024x1024 and saved them at a
 
 50% quality setting in Photoshop. Getting a file listing
 
 
-```
 
+```shell
 
  $ ls -l ../threejsfundamentals.org/threejs/resources/models/windmill
 
  -rw-r--r--@ 1 gregg  staff     299 May 20  2009 windmill.mtl
 
  -rw-r--r--@ 1 gregg  staff  142989 May 20  2009 windmill.obj
 
@@ -522,7 +522,7 @@ with this compression so be sure to consult with them to discuss the tradeoffs.
 
 Now, to use the .MTL file we need to edit it to reference the .JPG files
 
 instead of the .TGA files. Fortunately it's a simple text file so it's easy to edit
 
 
-```
 
+```mtl
 
 newmtl blinn1SG
 
 Ka 0.10 0.10 0.10
 
 
@@ -550,7 +550,7 @@ illum 2
 
 Now that the .MTL file points to some reasonable size textures we need to load it so we'll just do like we did above, first load the materials
 
 and then set them on the `OBJLoader2`
 
 
-```
 
+```js
 
 {
 
 +  const objLoader = new THREE.OBJLoader2();
 
 +  objLoader.loadMtl('resources/models/windmill_2/windmill-fixed.mtl', null, (materials) => {
 
@@ -584,7 +584,7 @@ Issue #1: The three `MTLLoader` creates materials that multiply the material's d
 
 
 That's a useful feature but looking a the .MTL file above the line
 
 
-```
 
+```mtl
 
 Kd 0.00 0.00 0.00
 
 ```
 
 
@@ -593,7 +593,7 @@ did not multiply the diffuse texture map by the diffuse color. That's why it wor
 
 
 To fix this we can change the line to
 
 
-```
 
+```mtl
 
 Kd 1.00 1.00 1.00
 
 ```
 
 
@@ -608,7 +608,7 @@ needs a specular color set.
 
 
 Like above we can fix that by editing the .MTL file like this.
 
 
-```
 
+```mtl
 
 -Ks 0.00 0.00 0.00
 
 +Ks 1.00 1.00 1.00
 
 ```
 
@@ -617,7 +617,7 @@ Issue #3: The `windmill_normal.jpg` is a normal map not a bump map.
 
 
 Just like above we just need to edit the .MTL file
 
 
-```
 
+```mtl
 
 -map_bump windmill_normal.jpg 
 -bump windmill_normal.jpg 
 +norm windmill_normal.jpg

+ 4 - 4
threejs/lessons/threejs-materials.md
View File 

@@ -14,7 +14,7 @@ accomplish.
 
 There are 2 ways to set most material properties. One at creation time which
 
 we've seen before.
 
 
-```
 
+```js
 
 const material = new THREE.MeshPhongMaterial({
 
   color: 0xFF0000,    // red (can also use a CSS color string here)
 
   flatShading: true,
 
@@ -23,7 +23,7 @@ const material = new THREE.MeshPhongMaterial({
 
 
 The other is after creation
 
 
-```
 
+```js
 
 const material = new THREE.MeshPhongMaterial();
 
 material.color.setHSL(0, 1, .5);  // red
 
 material.flatShading = true;
 
@@ -31,7 +31,7 @@ material.flatShading = true;
 
 
 note that properties of type `THREE.Color` have multiple ways to be set.
 
 
-```
 
+```js
 
 material.color.set(0x00FFFF);    // same as CSS's #RRGGBB style
 
 material.color.set(cssString);   // any CSS color, eg 'purple', '#F32', 
                                  // 'rgb(255, 127, 64)',
 
@@ -43,7 +43,7 @@ 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
 
 
-```
 
+```js
 
 const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000});         // red
 
 const m2 = new THREE.MeshBasicMaterial({color: 'red'});            // red
 
 const m3 = new THREE.MeshBasicMaterial({color: '#F00'});           // red

+ 19 - 19
threejs/lessons/threejs-multiple-scenes.md
View File 

@@ -35,7 +35,7 @@ issues for the same reasons.
 
 Let's start with a simple example with just 2 scenes. First we'll
 
 make the HTML
 
 
-```
 
+```html
 
 <canvas id="c"></canvas>
 
 <p>
 
   <span id="box" class="diagram left"></span>
 
@@ -51,7 +51,7 @@ make the HTML
 
 
 Then we can setup the CSS maybe something like this
 
 
-```
 
+```css
 
 #c {
 
   position: fixed;
 
   left: 0;
 
@@ -83,7 +83,7 @@ We set the canvsas to fill the screen and we set its `z-index` to
 
 Now we'll make 2 scenes each with a light and a camera.
 
 To one scene we'll add a cube and to another a diamond.
 
 
-```
 
+```js
 
 function makeScene(elem) {
 
   const scene = new THREE.Scene();
 
 
@@ -142,7 +142,7 @@ only if the element is on the screen. We can tell THREE.js
 
 to only render to part of the canvas by turning on the *scissor*
 
 test with `Renderer.setScissorTest` and then setting both the scissor and the viewport with `Renderer.setViewport` and `Renderer.setScissor`.
 
 
-```
 
+```js
 
 function rendenerSceneInfo(sceneInfo) {
 
   const {scene, camera, elem} = sceneInfo;
 
 
@@ -173,7 +173,7 @@ function rendenerSceneInfo(sceneInfo) {
 
 And then our render function will just first clear the screen
 
 and then render each scene.
 
 
-```
 
+```js
 
 function render(time) {
 
   time *= 0.001;
 
 
@@ -208,7 +208,7 @@ drawn into the canvas will lag behind the rest of the page.
 
 
 If we give each area a border 
 
-```
 
+```css
 
 .diagram {
 
   display: inline-block;
 
   width: 5em;
 
@@ -219,7 +219,7 @@ If we give each area a border
 
 
 And we set the background of each scene
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 +scene.background = new THREE.Color('red');
 
 ```
 
@@ -230,7 +230,7 @@ And if we <a href="../threejs-multiple-scenes-v2.html" target="_blank">quickly s
 
 
 We can switch to a different method which has a different tradeoff. We'll switch the canvas's CSS from `position: fixed` to `position: absolute`. 
 
-```
 
+```css
 
 #c {
 
 -  position: fixed;
 
 +  position: absolute;
 
@@ -240,14 +240,14 @@ Then we'll set the canvas's transform to move it so
 
 the top of the canvas is at the top of whatever part
 
 the page is currently scrolled to.
 
 
-```
 
+```js
 
 function render(time) {
 
   ...
 
 
   const transform = `translateY(${window.scrollY}px)`;
 
   renderer.domElement.style.transform = transform;
 
 
-```
 
+```js
 
 
 `position: fixed` kept the canvas from scrolling at all
 
 while the rest of the page scrolled over it. `position: absolute` will let the canvas scroll with the rest of the page which means whatever we draw will stick with the page as it scrolls even if we're too slow to render. When we finally get a chance to render then we move the canvas so it matches where the page has been scrolled and then we re-render. This means only the edges of the window will show some un-rendered bits for a moment but <a href="../threejs-multiple-scenes-v2.html" target="_blank">the stuff in the middle of the page should match up</a> and not slide. Here's a view of the results of the new method slowed down 10x.
 
@@ -262,7 +262,7 @@ We could make it so the main render function, the one managing the canvas, just
 
 
 Here's the main render function
 
 
-```
 
+```js
 
 const sceneElements = [];
 
 function addScene(elem, fn) {
 
   sceneElements.push({elem, fn});
 
@@ -310,7 +310,7 @@ It checks if the element is on screen. If it is it calls `fn` and passes it the
 
 
 Now the setup code for each scene just adds itself to the list of scenes
 
 
-```
 
+```js
 
 {
 
   const elem = document.querySelector('#box');
 
   const {scene, camera} = makeScene();
 
@@ -356,7 +356,7 @@ With that we no longer needed `sceneInfo1` and `sceneInfo2` and the code that wa
 
 
 One last even more generic thing we can do is use HTML [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). This is a way to add your own data to an HTML element. Instead of using `id="..."` we'll use `data-diagram="..."` like this
 
 
-```
 
+```html
 
 <canvas id="c"></canvas>
 
 <p>
 
 -  <span id="box" class="diagram left"></span>
 
@@ -374,7 +374,7 @@ One last even more generic thing we can do is use HTML [dataset](https://develop
 
 
 We can them change the CSS selector to select for that
 
 
-```
 
+```css
 
 -.diagram
 
 +*[data-diagram] {
 
   display: inline-block;
 
@@ -385,7 +385,7 @@ We can them change the CSS selector to select for that
 
 
 We'll change the scene setup code to just be a map of names to *scene initialization functions* that return a *scene render function*.
 
 
-```
 
+```js
 
 const sceneInitFunctionsByName = {
 
   'box': () => {
 
     const {scene, camera} = makeScene();
 
@@ -423,7 +423,7 @@ const sceneInitFunctionsByName = {
 
 
 And to init we can just use `querySelectorAll` to find all the diagrams and call the corresponding init function for that diagram. 
 
-```
 
+```js
 
 document.querySelectorAll('[data-diagram]').forEach((elem) => {
 
   const sceneName = elem.dataset.diagram;
 
   const sceneInitFunction = sceneInitFunctionsByName[sceneName];
 
@@ -440,13 +440,13 @@ No change to the visuals but the code is even more generic.
 
 
 Adding interactively, for example a `TrackballControls` is just as easy. First we add the script for the control.
 
 
-```
 
+```html
 
 <script src="resources/threejs/r98/js/controls/TrackballControls.js"></script>
 
 ```
 
 
 And then we can add a `TrackballControls` to each scene passing in the element associated with that scene.
 
 
-```
 
+```js
 
 -function makeScene() {
 
 +function makeScene(elem) {
 
   const scene = new THREE.Scene();
 
@@ -482,7 +482,7 @@ You'll notice we added the camera to the scene and the light to the camera. This
 
 
 We need up update those controls in our render functions
 
 
-```
 
+```js
 
 const sceneInitFunctionsByName = {
 
 - 'box': () => {
 
 -    const {scene, camera} = makeScene();

+ 15 - 15
threejs/lessons/threejs-picking.md
View File 

@@ -18,7 +18,7 @@ A few changes
 
 
 We'll parent the camera to another object so we can spin that other object and the camera will move around the scene just like a selfie stick.
 
 
-```
 
+```js
 
 *const fov = 60;
 
 const aspect = 2;  // the canvas default
 
 const near = 0.1;
 
@@ -38,13 +38,13 @@ const scene = new THREE.Scene();
 
 
 and in the `render` function we'll spin the camera pole.
 
 
-```
 
+```js
 
 cameraPole.rotation.y = time * .1;
 
 ```
 
 
 Also let's put the light on the camera so the light moves with it.
 
 
-```
 
+```js
 
 -scene.add(light);
 
 +camera.add(light);
 
 ```
 
@@ -52,7 +52,7 @@ Also let's put the light on the camera so the light moves with it.
 
 Let's generate 100 cubes with random colors in random positions, orientations,
 
 and scales.
 
 
-```
 
+```js
 
 const boxWidth = 1;
 
 const boxHeight = 1;
 
 const boxDepth = 1;
 
@@ -89,7 +89,7 @@ And finally let's pick.
 
 
 Let's make a simple class to manage the picking
 
 
-```
 
+```js
 
 class PickHelper {
 
   constructor() {
 
     this.raycaster = new THREE.Raycaster();
 
@@ -124,7 +124,7 @@ You can see we create a `RayCaster` and then we can call the `pick` function to
 
 Of course we could call this function only when the user pressed the mouse *down* which is probaby usually what you want but for this example we'll pick every frame whatever is under the mouse. To do this we first need to track where the mouse
 
 is
 
 
-```
 
+```js
 
 const pickPosition = {x: 0, y: 0};
 
 clearPickPosition();
 
 
@@ -153,7 +153,7 @@ Notice we're recording a normalized mouse position. Reguardless of the size of t
 
 
 While we're at it lets support mobile as well
 
 
-```
 
+```js
 
 window.addEventListener('touchstart', (event) => {
 
   // prevent the window from scrolling
 
   event.preventDefault();
 
@@ -169,7 +169,7 @@ window.addEventListener('touchend', clearPickPosition);
 
 
 And finally in our `render` function we call call the `PickHelper`'s `pick` function.
 
 
-```
 
+```js
 
 +const pickHelper = new PickHelper();
 
 
 function render(time) {
 
@@ -219,7 +219,7 @@ As an example let's apply this texture to the cubes.
 
 
 We'll just make these changes
 
 
-```
 
+```js
 
 +const loader = new THREE.TextureLoader();
 
 +const texture = loader.load('resources/images/frame.png');
 
 
@@ -261,7 +261,7 @@ To do this type of picking in THREE.js at the moment requires we create 2 scenes
 
 
 So, first create a second scene and make sure it clears to black.
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 scene.background = new THREE.Color('white');
 
 const pickingScene = new THREE.Scene();
 
@@ -270,7 +270,7 @@ pickingScene.background = new THREE.Color(0);
 
 
 Then, for each cube we place in the main scene we make a corresponding "picking cube" at the same position as the original cube, put it in the `pickingScene`, and set it's material to something that will draw the object's id as its color. Also we keep a map of ids to objects so when we look up an id later we can map it back to its corresponding object.
 
 
-```
 
+```js
 
 const idToObject = {};
 
 +const numObjects = 100;
 
 for (let i = 0; i < numObjects; ++i) {
 
@@ -315,7 +315,7 @@ Note that abusing the `MeshPhongMaterial` might not be the best solution as it w
 
 
 Because we're picking from pixels instead of ray casting we can change the code that sets the pick position to just use pixels.
 
 
-```
 
+```js
 
 function setPickPosition(event) {
 
 -  pickPosition.x = (event.clientX / canvas.clientWidth ) *  2 - 1;
 
 -  pickPosition.y = (event.clientY / canvas.clientHeight) * -2 + 1;  // note we flip Y
 
@@ -326,7 +326,7 @@ function setPickPosition(event) {
 
 
 Then let's change the `PickHelper` into a `GPUPickHelper`. It will use a `WebGLRenderTarget` like we covered the [article on render targets](threejs-rendertargets.html). Our render target here is only a single pixel in size, 1x1. 
 
-```
 
+```js
 
 -class PickHelper {
 
 +class GPUPickHelper {
 
   constructor() {
 
@@ -397,14 +397,14 @@ Then let's change the `PickHelper` into a `GPUPickHelper`. It will use a `WebGLR
 
 
 Then we just need to use it
 
 
-```
 
+```js
 
 -const pickHelper = new PickHelper();
 
 +const pickHelper = new GPUPickHelper();
 
 ```
 
 
 and pass it the `pickScene` instead of the `scene`.
 
 
-```
 
+```js
 
 -  pickHelper.pick(pickPosition, scene, camera, time);
 
 +  pickHelper.pick(pickPosition, pickScene, camera, time);
 
 ```

+ 13 - 13
threejs/lessons/threejs-prerequisites.md
View File 

@@ -29,7 +29,7 @@ Lots of 20yr old pages use HTML like
 
 That style is deprecated. Put your scripts
 
 at the bottom of the page.
 
 
-```
 
+```html
 
 <html>
 
   <head>
 
     ...
 
@@ -62,7 +62,7 @@ Put `'use strict';` at the top of every JavaScript file. It will help prevent lo
 
 
 ## Know how closures work
 
 
-```
 
+```js
 
 function a(v) {
 
   const foo = v;
 
   return function() {
 
@@ -123,7 +123,7 @@ the time. Use `let` in those cases where the value changes. This will help avoid
 
 
 As one example you can iterate over all the key/value pairs of an object with
 
 
-```
 
+```js
 
 for (const [key, value] of Object.entries(someObject)) {
 
   console.log(key, value);
 
 }
 
@@ -153,7 +153,7 @@ new code
 
 
 old code
 
 
-```
 
+```js
 
  const width = 300;
 
  const height = 150;
 
  const obj = {
 
@@ -167,7 +167,7 @@ old code
 
 
 new code
 
 
-```
 
+```js
 
  const width = 300;
 
  const height = 150;
 
  const obj = {
 
@@ -183,7 +183,7 @@ new code
 
 
 The spread operator has a ton of uses. Example
 
 
-```
 
+```js
 
  function log(className, ...args) {
 
    const elem = document.createElement('div');
 
    elem.className = className;
 
@@ -194,7 +194,7 @@ The spread operator has a ton of uses. Example
 
 
 Another example
 
 
-```
 
+```js
 
 const position = [1, 2, 3];
 
 somemesh.position.set(...position);
 
 ```
 
@@ -216,7 +216,7 @@ of ES5 makes them much easier than pre ES5.
 
 
 This is especially useful with callbacks and promises.
 
 
-```
 
+```js
 
 loader.load((texture) => {
 
   // use textrue
 
 });
 
@@ -224,7 +224,7 @@ loader.load((texture) => {
 
 
 Arrow functions bind `this`. They are a shortcut for
 
 
-```
 
+```js
 
 (function(args) {/* code */}).bind(this))
 
 ```
 
 
@@ -245,7 +245,7 @@ Template literals are strings using backticks instead of quotes.
 
 
 Template literals have basically 2 features. One is they can be multi-line
 
 
-```
 
+```js
 
 const foo = `this
 
 is
 
 a
 
@@ -259,7 +259,7 @@ const bar = "this\nis\na\ntemplate\nliteral";
 
 The other is that you can pop out of string mode and insert snippets of
 
 JavaScript using `${javascript-expression}`. This is the template part. Example:
 
 
-```
 
+```js
 
 const r = 192;
 
 const g = 255;
 
 const b = 64;
 
@@ -268,14 +268,14 @@ const rgbCSSColor = `rgb(${r},${g},${b})`;
 
 
 or
 
 
-```
 
+```js
 
 const color = [192, 255, 64];
 
 const rgbCSSColor = `rgb(${color.join(',')})`;
 
 ```
 
 
 or
 
 
-```
 
+```js
 
 const aWidth = 10;
 
 const bWidth = 20;
 
 someElement.style.width = `${aWidth + bWidth}px`;

+ 8 - 8
threejs/lessons/threejs-primitives.md
View File 

@@ -80,7 +80,7 @@ with the [examples from the previous article](threejs-responsive.html).
 
 
 Near the top let's set a background color
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 +scene.background = new THREE.Color(0xAAAAAA);
 
 ```
 
@@ -90,7 +90,7 @@ This tells three.js to clear to lightish gray.
 
 The camera needs to change position so that we can see all the
 
 objects.
 
 
-```
 
+```js
 
 -const fov = 75;
 
 +const fov = 40;
 
 const aspect = 2;  // the canvas default
 
@@ -105,7 +105,7 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
 Let's add a function, `addObject`, that takes an x, y position and an `Object3D` and adds
 
 the object to the scene.
 
 
-```
 
+```js
 
 const objects = [];
 
 const spread = 15;
 
 
@@ -132,7 +132,7 @@ as `luminance` goes from 0.0 to 0.5 the color
 
 will go from black to `hue`. From 0.5 to 1.0
 
 the color will go from `hue` to white.
 
 
-```
 
+```js
 
 function createMaterial() {
 
   const material = new THREE.MeshPhongMaterial({
 
     side: THREE.DoubleSide,
 
@@ -169,7 +169,7 @@ we pass a geometry and it creates a random colored
 
 material via `createMaterial` and adds it to the scene
 
 via `addObject`.
 
 
-```
 
+```js
 
 function addSolidGeometry(x, y, geometry) {
 
   const mesh = new THREE.Mesh(geometry, createMaterial());
 
   addObject(x, y, mesh);
 
@@ -179,7 +179,7 @@ function addSolidGeometry(x, y, geometry) {
 
 Now we can use this for the majority of the primitives we create.
 
 For example creating a box
 
 
-```
 
+```js
 
 {
 
   const width = 8;
 
   const height = 8;
 
@@ -204,7 +204,7 @@ and a callback. The callback is called after the font loads.
 
 In the callback we create the geometry
 
 and call `addObject` to add it the scene.
 
 
-```
 
+```js
 
 {
 
   const loader = new THREE.FontLoader();
 
   loader.load('resources/threejs/fonts/helvetiker_regular.typeface.json', (font) => {
 
@@ -263,7 +263,7 @@ The other exceptions are the 2 line based examples for `EdgesGeometry`
 
 and `WireframeGeometry`. Instead of calling `addSolidGeometry` they call
 
 `addLineGeomtry` which looks like this
 
 
-```
 
+```js
 
 function addLineGeometry(x, y, geometry) {
 
   const material = new THREE.LineBasicMaterial({color: 0x000000});
 
   const mesh = new THREE.LineSegments(geometry, material);

+ 6 - 7
threejs/lessons/threejs-rendertargets.md
View File 

@@ -8,7 +8,7 @@ Let's make a simple example. We'll start with an example from [the article on re
 
 
 Rendering to a render target just almost exactly the same as normal rendering. First we create a `WebGLRenderTarget`.
 
 
-```
 
+```js
 
 const rtWidth = 512;
 
 const rtHeight = 512;
 
 const renderTarget = new THREE.WebGLRenderTarget(rtWidth, rtHeight);
 
@@ -16,7 +16,7 @@ const renderTarget = new THREE.WebGLRenderTarget(rtWidth, rtHeight);
 
 
 Then we need a `Camera` and a `Scene`
 
 
-```
 
+```js
 
 const rtFov = 75;
 
 const rtAspect = rtWidth / rtHeight;
 
 const rtNear = 0.1;
 
@@ -32,7 +32,7 @@ Notice we set the aspect to the aspect for the render target, not the canvas.
 
 
 We fill the scene with stuff. In this case we're using the light and the 3 cubes [from the previous article](threejs-responsive.html).
 
 
-```
 
+```js
 
 {
 
   const color = 0xFFFFFF;
 
   const intensity = 1;
 
@@ -69,7 +69,7 @@ We just need to add stuff to render.
 
 
 Let's add a cube that uses the render target's texture.
 
 
-```
 
+```js
 
 const material = new THREE.MeshPhongMaterial({
 
   map: renderTarget.texture,
 
 });
 
@@ -79,7 +79,7 @@ scene.add(cube);
 
 
 Now at render time first we render the render target scene to the render target.
 
 
-```
 
+```js
 
 function render(time) {
 
   time *= 0.001;
 
 
@@ -95,12 +95,11 @@ function render(time) {
 
 
   // draw render target scene to render target
 
   renderer.render(rtScene, rtCamera, renderTarget);
 
-
 
 ```
 
 
 Then we render the scene with the single cube that is using the render target's texture to the canvas.
 
 
-```
 
+```js
 
   // rotate the cube in the scene
 
   cube.rotation.x = time;
 
   cube.rotation.y = time * 1.1;

+ 7 - 7
threejs/lessons/threejs-responsive.md
View File 

@@ -18,7 +18,7 @@ in the middle of a document is another example.
 
 The last sample we had used a plain canvas with no css and
 
 no size
 
 
-```
 
+```html
 
 <canvas id="c"></canvas>
 
 ```
 
 
@@ -29,7 +29,7 @@ of something is to use CSS.
 
 
 Let's make the canvas fill the page by adding CSS
 
 
-```
 
+```html
 
 <style>
 
 html, body {
 
    margin: 0;
 
@@ -82,7 +82,7 @@ display size. We can do that by looking at the canvas's
 
 
 We'll update our render loop like this
 
 
-```
 
+```js
 
 function render(time) {
 
   time *= 0.001;
 
 
@@ -111,7 +111,7 @@ number of pixels in the canvas itself. This is no different than an image.
 
 For example we might have a 128x64 pixel image and using
 
 css we might display as 400x200 pixels.
 
 
-```
 
+```html
 
 <img src="some128x64image.jpg" style="width:400px; height:200px">
 
 ```
 
 
@@ -124,7 +124,7 @@ attributes.
 
 Let's write a function that checks if the renderer's canvas is not
 
 already the size it is being displayed as and if so set its size.
 
 
-```
 
+```js
 
 function resizeRendererToDisplaySize(renderer) {
 
   const canvas = renderer.domElement;
 
   const width = canvas.clientWidth;
 
@@ -152,7 +152,7 @@ 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
 
 our render loop to use the new function
 
 
-```
 
+```js
 
 function render(time) {
 
   time *= 0.001;
 
 
@@ -237,7 +237,7 @@ you passed in.
 
 
 The other way is to do it yourself when you resize the canvas.
 
 
-```
 
+```js
 
     function resizeRendererToDisplaySize(renderer) {
 
       const canvas = renderer.domElement;
 
       const pixelRatio = window.devicePixelRatio;

+ 11 - 11
threejs/lessons/threejs-scenegraph.md
View File 

@@ -44,7 +44,7 @@ sun, earth, moon as a demonstration of how to use a scenegraph. Of course
 
 the real sun, earth, and moon use physics but for our purposes we'll
 
 fake it with a scenegraph.
 
 
-```
 
+```js
 
 // an array of objects who's rotation to update
 
 const objects = [];
 
 
@@ -76,7 +76,7 @@ Let's also put a single point light in the center of the scene. We'll go into mo
 
 details about point lights later but for now the simple version is a point light
 
 represents light that eminates from a single point.
 
 
-```
 
+```js
 
 {
 
   const color = 0xFFFFFF;
 
   const intensity = 3;
 
@@ -93,7 +93,7 @@ which way the top of the camera is facing or rather which way is "up" for the
 
 camera. For most situations positive Y being up is good enough but since 
 we are looking straight down we need to tell the camera that positive Z is up.
 
 
-```
 
+```js
 
 const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
 camera.position.set(0, 50, 0);
 
 camera.up.set(0, 0, 1);
 
@@ -103,7 +103,7 @@ camera.lookAt(0, 0, 0);
 
 In the render loop, adapted from previous examples, we're rotating all
 
 objects in our `objects` array with this code.
 
 
-```
 
+```js
 
 objects.forEach((obj) => {
 
   obj.rotation.y = time;
 
 });
 
@@ -115,7 +115,7 @@ Since we added the `sunMesh` to the `objects` array it will rotate.
 
 
 Now let's add an the earth.
 
 
-```
 
+```js
 
 const earthMaterial = new THREE.MeshPhongMaterial({color: 0x2233FF, emissive: 0x112244});
 
 const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
 
 earthMesh.position.x = 10;
 
@@ -136,7 +136,7 @@ rotate too.
 
 You can see both the sun and the earth are rotating but the earth is not
 
 going around the sun. Let's make the earth a child of the sun
 
 
-```
 
+```js
 
 -scene.add(earthMesh);
 
 +sunMesh.add(earthMesh);
 
 ``` 
@@ -162,7 +162,7 @@ its scale set to 5x with `sunMesh.scale.set(5, 5, 5)`. That means the
 
 To fix it let's add an empty scene graph node. We'll parent both the sun and the earth
 
 to that node.
 
 
-```
 
+```js
 
 +const solarSystem = new THREE.Object3D();
 
 +scene.add(solarSystem);
 
 +objects.push(solarSystem);
 
@@ -200,7 +200,7 @@ and rotating itself.
 
 
 Continuing that same pattern let's add a moon.
 
 
-```
 
+```js
 
 +const earthOrbit = new THREE.Object3D();
 
 +earthOrbit.position.x = 10;
 
 +solarSystem.add(earthOrbit);
 
@@ -246,7 +246,7 @@ One is called an `AxesHelper`. It draws 3 lines representing the local
 
 <span style="color:blue">Z</span> axes. Let's add one to every node we
 
 created.
 
 
-```
 
+```js
 
 // add an AxesHelper to each node
 
 objects.forEach((node) => {
 
   const axes = new THREE.AxesHelper();
 
@@ -286,7 +286,7 @@ We want to make both a `GridHelper` and an `AxesHelper` for each node. We need
 
 a label for each node so we'll get rid of the old loop and switch to calling
 
 some function to add the helpers for each node
 
 
-```
 
+```js
 
 -// add an AxesHelper to each node
 
 -objects.forEach((node) => {
 
 -  const axes = new THREE.AxesHelper();
 
@@ -318,7 +318,7 @@ that has a getter and setter for a property. That way we can let dat.GUI
 
 think it's manipulating a single property but internally we can set
 
 the visible property of both the `AxesHelper` and `GridHelper` for a node.
 
 
-```
 
+```js
 
 // Turns both axes and grid visible on/off
 
 // dat.GUI requires a property that returns a bool
 
 // to decide to make a checkbox so we make a setter

+ 21 - 21
threejs/lessons/threejs-shadows.md
View File 

@@ -50,7 +50,7 @@ We'll use some of the code from [the previous article](threejs-cameras.html).
 
 
 Let's set the background color to white.
 
 
-```
 
+```js
 
 const scene = new THREE.Scene();
 
 +scene.background = new THREE.Color('white');
 
 ```
 
@@ -58,7 +58,7 @@ const scene = new THREE.Scene();
 
 Then we'll setup the same checkerboard ground but this time it's using
 
 a `MeshBasicMaterial` as we don't need lighting for the ground.
 
 
-```
 
+```js
 
 +const loader = new THREE.TextureLoader();
 
 
 {
 
@@ -91,19 +91,19 @@ light grey checkerboard.
 
 
 Let's load the shadow texture
 
 
-```javascript
 
+```js
 
 const shadowTexture = loader.load('resources/images/roundshadow.png');
 
 ```
 
 
 and make an array to remember each sphere and associated objects.
 
 
-```javascript
 
+```js
 
 const sphereShadowBases = [];
 
 ```
 
 
 Then we'll make a sphere geometry
 
 
-```javascript
 
+```js
 
 const sphereRadius = 1;
 
 const sphereWidthDivisions = 32;
 
 const sphereHeightDivisions = 16;
 
@@ -112,7 +112,7 @@ const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisi
 
 
 And a plane geometry for the fake shadow
 
 
-```
 
+```js
 
 const planeSize = 1;
 
 const shadowGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
 
 ```
 
@@ -129,7 +129,7 @@ We make each sphere a different hue and then save off the base, the sphere mesh,
 
 the shadow mesh and the initial y position of each sphere.
 
 
 
-```javascript
 
+```js
 
 const numSpheres = 15;
 
 for (let i = 0; i < numSpheres; ++i) {
 
   // make a base for the shadow and the sphere.
 
@@ -169,7 +169,7 @@ for (let i = 0; i < numSpheres; ++i) {
 
 We setup 2 lights. One is a `HemisphereLight` with the itensity set to 2 to really
 
 brighten things up.
 
 
-```javascript
 
+```js
 
 {
 
   const skyColor = 0xB1E1FF;  // light blue
 
   const groundColor = 0xB97A20;  // brownish orange
 
@@ -181,7 +181,7 @@ brighten things up.
 
 
 The other is a `DirectionalLight` so the spheres get some defintion
 
 
-```javascript
 
+```js
 
 {
 
   const color = 0xFFFFFF;
 
   const intensity = 1;
 
@@ -199,7 +199,7 @@ move the sphere up and down using `Math.abs(Math.sin(time))`
 
 which gives us a bouncy animation. And, we also set the shadow material's 
 opacity so that as each sphere goes higher its shadow fades out.
 
 
-```javascript
 
+```js
 
 function render(time) {
 
   time *= 0.001;  // convert to seconds
 
 
@@ -248,14 +248,14 @@ Let's start with the `DirectionaLight` with helper example from [the lights arti
 
 
 The first thing we need to do is turn on shadows in the renderer.
 
 
-```
 
+```js
 
 const renderer = new THREE.WebGLRenderer({canvas: canvas});
 
 +renderer.shadowMap.enabled = true;
 
 ```
 
 
 Then we also need to tell the light to cast a shadow
 
 
-```javascript
 
+```js
 
 const light = new THREE.DirectionalLight(color, intensity);
 
 +light.castShadow = true;
 
 ```
 
@@ -266,14 +266,14 @@ both cast shadows and/or receive shadows.
 
 Let's make the plane (the ground) only receive shadows since we don't
 
 really care what happens underneath.
 
 
-```javascript
 
+```js
 
 const mesh = new THREE.Mesh(planeGeo, planeMat);
 
 mesh.receiveShadow = true;
 
 ```
 
 
 For the cube and the sphere let's have them both receive and cast shadows
 
 
-```javascript
 
+```js
 
 const mesh = new THREE.Mesh(cubeGeo, cubeMat);
 
 mesh.castShadow = true;
 
 mesh.receiveShadow = true;
 
@@ -300,7 +300,7 @@ the shadows get rendered. In the example above that area is too small.
 
 In order to visualize that area we can get the light's shadow camera and add
 
 a `CameraHelper` to the scene.
 
 
-```javascript
 
+```js
 
 const cameraHelper = new THREE.CameraHelper(light.shadow.camera);
 
 scene.add(cameraHelper);
 
 ```
 
@@ -328,7 +328,7 @@ that we'll pass an object and 2 properties. It will present one property that da
 
 can adjust and in response will set the two properties one positive and one negative.
 
 We can use this to set `left` and `right` as `width` and `up` and `down` as `height`.
 
 
-```javascript
 
+```js
 
 class DimensionGUIHelper {
 
   constructor(obj, minProp, maxProp) {
 
     this.obj = obj;
 
@@ -348,7 +348,7 @@ class DimensionGUIHelper {
 
 We'll also use the `MinMaxGUIHelper` we created in the [camera article](threejs-cameras.html)
 
 to adjust `near` and `far`.
 
 
-```
 
+```js
 
 const gui = new dat.GUI();
 
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 
 gui.add(light, 'intensity', 0, 2, 0.01);
 
@@ -372,7 +372,7 @@ We tell the GUI to call our `updateCamera` function anytime anything changes.
 
 Let's write that function to update the light, the helper for the light, the
 
 light's shadow camera, and the helper showing the light's shadow camera.
 
 
-```
 
+```js
 
 function updateCamera() {
 
   // update the light target's matrixWorld because it's needed by the helper
 
   light.target.updateMatrixWorld();
 
@@ -423,7 +423,7 @@ where we could manually set most its settings, `SpotLight`'s shadow camera is co
 
 camera is directly connected to the `SpotLight`'s `angle` setting.
 
 The `aspect` is set automatically based on the size of the shadow map.
 
 
-```javascript
 
+```js
 
 -const light = new THREE.DirectionalLight(color, intensity);
 
 +const light = new THREE.SpotLight(color, intensity);
 
 ```
 
@@ -463,7 +463,7 @@ we'll set it only to receive shadows. Also we'll set the position of the
 
 box so its bottom is slightly below the floor so the floor and the bottom
 
 of the box don't z-fight.
 
 
-```javascript
 
+```js
 
 {
 
   const cubeSize = 30;
 
   const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
 
@@ -480,7 +480,7 @@ of the box don't z-fight.
 
 
 And of course we need to switch the light to a `PointLight`.
 
 
-```javascript
 
+```js
 
 -const light = new THREE.SpotLight(color, intensity);
 
 +const light = new THREE.PointLight(color, intensity);

+ 17 - 18
threejs/lessons/threejs-textures.md
View File 

@@ -41,7 +41,7 @@ We'll modify one of our first samples. All we need to do is create a `TextureLoa
 
 [`load`](TextureLoader.load) method with the URL of an
 
 image and and set the material's `map` property to the result instead of setting its `color`.
 
 
-```
 
+```js
 
 +const loader = new THREE.TextureLoader();
 
 
 const material = new THREE.MeshBasicMaterial({
 
@@ -73,7 +73,7 @@ How about 6 textures, one on each face of a cube?
 
 
 We just make 6 materials and pass them as an array when we create the `Mesh`
 
 
-```
 
+```js
 
 const loader = new THREE.TextureLoader();
 
 
 -const material = new THREE.MeshBasicMaterial({
 
@@ -114,7 +114,7 @@ Most of the code on this site uses the easiest method of loading textures.
 
 We create a `TextureLoader` and then call its [`load`](TextureLoader.load) method. 
 This returns a `Texture` object.
 
 
-```
 
+```js
 
 const texture = loader.load('resources/images/flower-1.jpg');
 
 ```
 
 
@@ -133,7 +133,7 @@ that will be called when the texture has finished loading. Going back to our top
 
 we can wait for the texture to load before creating our `Mesh` and adding it to scene
 
 like this
 
 
-```
 
+```js
 
 const loader = new THREE.TextureLoader();
 
 loader.load('resources/images/wall.jpg', (texture) => {
 
   const material = new THREE.MeshBasicMaterial({
 
@@ -156,7 +156,7 @@ To wait until all textures have loaded you can use a `LoadingManager`. Create on
 
 and pass it to the `TextureLoader` then set its  [`onLoad`](LoadingManager.onLoad)
 
 property to a callback.
 
 
-```
 
+```js
 
 +const loadManager = new THREE.LoadingManager();
 
 *const loader = new THREE.TextureLoader(loadManager);
 
 
@@ -181,7 +181,7 @@ we can set to another callback to show a progress indicator.
 
 
 First we'll add a progress bar in HTML
 
 
-```
 
+```html
 
 <body>
 
   <canvas id="c"></canvas>
 
 +  <div id="loading">
 
@@ -192,7 +192,7 @@ First we'll add a progress bar in HTML
 
 
 and the CSS for it
 
 
-```
 
+```css
 
 #loading {
 
     position: fixed;
 
     top: 0;
 
@@ -215,14 +215,13 @@ and the CSS for it
 
     transform-origin: top left;
 
     transform: scaleX(0);
 
 }
 
-
 
 ```
 
 
 Then in the code we'll update the scale of the `progressbar` in our `onProgress` callback. It gets
 
 called with the URL of the last item loaded, the number of items loaded so far, and the total
 
 number of items loaded.
 
 
-```
 
+```js
 
 +const loadingElem = document.querySelector('#loading');
 
 +const progressBarElem = loadingElem.querySelector('.progressbar');
 
 
@@ -474,14 +473,14 @@ They can be set to one of:
 
 
 For example to turn on wrapping in both directions:
 
 
-```
 
+```js
 
 someTexture.wrapS = THREE.RepeatWrapping;
 
 someTexture.wrapT = THREE.RepeatWrapping;
 
 ```
 
 
 Repeating is set with the [repeat] repeat property.
 
 
-```
 
+```js
 
 const timesToRepeatHorizontally = 4;
 
 const timesToRepeatVertically = 2;
 
 someTexture.repeat.set(timesToRepeatHorizontally, timesToRepeatVertically);
 
@@ -491,7 +490,7 @@ Offseting the texture can be done by setting the `offset` property. Textures
 
 are offset with units where 1 unit = 1 texture size. On other words 0 = no offset 
 and 1 = offset one full texture amount.
 
 
-```
 
+```js
 
 const xOffset = .5;   // offset by half the texture
 
 const yOffset = .25;  // offset by 1/2 the texture
 
 someTexture.offset.set(xOffset, yOffset);`
 
@@ -503,7 +502,7 @@ It defaults to 0,0 which rotates from the bottom left corner. Like offset
 
 these units are in texture size so setting them to `.5, .5` would rotate
 
 around the center of the texture.
 
 
-```
 
+```js
 
 someTexture.center.set(.5, .5);
 
 someTexture.rotation = THREE.Math.degToRad(45); 
 ```
 
@@ -512,7 +511,7 @@ Let's modify the top sample above to play with these values
 
 
 First we'll keep a reference to the texture so we can manipulate it
 
 
-```
 
+```js
 
 +const texture = loader.load('resources/images/wall.jpg');
 
 const material = new THREE.MeshBasicMaterial({
 
 -  map: loader.load('resources/images/wall.jpg');
 
@@ -522,7 +521,7 @@ const material = new THREE.MeshBasicMaterial({
 
 
 Then we'll use [dat.GUI](https://github.com/dataarts/dat.gui) again to provide a simple interface.
 
 
-```
 
+```html
 
 <script src="../3rdparty/dat.gui.min.js"></script>
 
 ```
 
 
@@ -530,7 +529,7 @@ As we did in previous dat.GUI examples we'll use a simple class to
 
 give dat.GUI an object that it can manipulate in degrees
 
 but that will set a property in radians.
 
 
-```
 
+```js
 
 class DegRadHelper {
 
   constructor(obj, prop) {
 
     this.obj = obj;
 
@@ -549,7 +548,7 @@ We also need a class that will convert from a string like `"123"` into
 
 a number like `123` since three.js requires numbers for enum settings
 
 like `wrapS` and `wrapT` but dat.GUI only uses strings for enums.
 
 
-```
 
+```js
 
 class StringToNumberHelper {
 
   constructor(obj, prop) {
 
     this.obj = obj;
 
@@ -566,7 +565,7 @@ class StringToNumberHelper {
 
 
 Using those classes we can setup a simple GUI for the settings above
 
 
-```
 
+```js
 
 const wrapModes = {
 
   'ClampToEdgeWrapping': THREE.ClampToEdgeWrapping,
 
   'RepeatWrapping': THREE.RepeatWrapping,