make light setup code more self documenting

threejs/lessons/threejs-fundamentals.md

@@ -222,9 +222,13 @@ we'll go over in a future article. For now let's create a directional
 light.
 
 ```
-const light = new THREE.DirectionalLight(0xffffff, 1);
-light.position.set(-1, 2, 4);
-scene.add(light);
+{
+  const color = 0xFFFFFF;
+  const intensity = 1;
+  const light = new THREE.DirectionalLight(color, intensity);
+  light.position.set(-1, 2, 4);
+  scene.add(light);
+}
 ```
 
 Directional lights have a position and a target. Both default to 0, 0, 0. In our

threejs/threejs-fundamentals-3-cubes.html

@@ -26,9 +26,13 @@ function main() {
 
   const scene = new THREE.Scene();
 
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(-1, 2, 4);
-  scene.add(light);
+  {
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(-1, 2, 4);
+    scene.add(light);
+  }
 
   const boxWidth = 1;
   const boxHeight = 1;

threejs/threejs-fundamentals-with-light.html

@@ -26,9 +26,13 @@ function main() {
 
   const scene = new THREE.Scene();
 
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(-1, 2, 4);
-  scene.add(light);
+  {
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(-1, 2, 4);
+    scene.add(light);
+  }
 
   const boxWidth = 1;
   const boxHeight = 1;

threejs/threejs-primitives-text.html

@@ -38,12 +38,16 @@ function main() {
   const scene = new THREE.Scene();
 
   {
-    const light = new THREE.DirectionalLight(0xffffff, 1);
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(-1, 2, 4);
     scene.add(light);
   }
   {
-    const light = new THREE.DirectionalLight(0xffffff, 1);
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(1, -2, -4);
     scene.add(light);
   }

threejs/threejs-primitives.html

@@ -38,12 +38,16 @@ function main() {
   const scene = new THREE.Scene();
 
   {
-    const light = new THREE.DirectionalLight(0xffffff, 1);
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(-1, 2, 4);
     scene.add(light);
   }
   {
-    const light = new THREE.DirectionalLight(0xffffff, 1);
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(1, -2, -4);
     scene.add(light);
   }

threejs/threejs-responsive-hd-dpi.html

@@ -37,9 +37,13 @@ function main() {
 
   const scene = new THREE.Scene();
 
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(-1, 2, 4);
-  scene.add(light);
+  {
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(-1, 2, 4);
+    scene.add(light);
+  }
 
   const boxWidth = 1;
   const boxHeight = 1;

threejs/threejs-responsive-no-resize.html

@@ -37,9 +37,13 @@ function main() {
 
   const scene = new THREE.Scene();
 
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(-1, 2, 4);
-  scene.add(light);
+  {
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(-1, 2, 4);
+    scene.add(light);
+  }
 
   const boxWidth = 1;
   const boxHeight = 1;

threejs/threejs-responsive-update-camera.html

@@ -37,9 +37,13 @@ function main() {
 
   const scene = new THREE.Scene();
 
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(-1, 2, 4);
-  scene.add(light);
+  {
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(-1, 2, 4);
+    scene.add(light);
+  }
 
   const boxWidth = 1;
   const boxHeight = 1;

threejs/threejs-responsive.html

@@ -36,9 +36,13 @@ function main() {
 
   const scene = new THREE.Scene();
 
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(-1, 2, 4);
-  scene.add(light);
+  {
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(-1, 2, 4);
+    scene.add(light);
+  }
 
   const boxWidth = 1;
   const boxHeight = 1;

threejs/threejs-responsive.js

@@ -13,9 +13,13 @@ function main() {
 
   const scene = new THREE.Scene();
 
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(-1, 2, 4);
-  scene.add(light);
+  {
+    const color = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(-1, 2, 4);
+    scene.add(light);
+  }
 
   const boxWidth = 1;
   const boxHeight = 1;