make material table code and style shared

threejs/lessons/resources/threejs-material-table.css

@@ -0,0 +1,50 @@
+#material-table {
+  font-family: monospace;
+  display: flex;
+  justify-content: center;
+}
+#material-table tr:nth-child(even) {
+    background: #def;
+}
+#material-table thead>td {
+    vertical-align: bottom;
+    padding: .5em;
+}
+#material-table thead>td>a {
+    text-orientation: upright;
+    writing-mode: vertical-lr;
+    text-decoration: none;
+    display: block;
+    letter-spacing: -2px;
+}
+#material-table table {
+    border-collapse: collapse;
+    background: #cde;
+}
+#material-table td:nth-child(1) {
+    text-align: right;
+}
+#material-table td {
+    border: 1px solid black;
+    padding: .1em .5em .1em .5em;
+}
+#material-table td {
+  border: 1px solid black;
+}
+@media (max-width: 500px) {
+  #material-table {
+    font-size: small;
+  }
+  #material-table thead>td {
+      vertical-align: bottom;
+      padding: .5em 0 .5em 0;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  #material-table table {
+      background: #06488a;
+  }
+  #material-table tr:nth-child(even) {
+      background: #185795;
+  }
+}

threejs/lessons/resources/threejs-material-table.js

@@ -0,0 +1,184 @@
+'use strict';
+
+const materials = [
+  {
+    name: 'MeshBasicMaterial',
+    shortName: 'Basic',
+    properties: [
+      'alphaMap',
+      'aoMap',
+      'aoMapIntensity',
+      'color',
+      'combine',
+      'envMap',
+      'lightMap',
+      'lightMapIntensity',
+      'map',
+      'reflectivity',
+      'refractionRatio',
+      'specularMap',
+      'wireframe',
+    ],
+  },
+  {
+    name: 'MeshLambertMaterial',
+    shortName: 'Lambert',
+    properties: [
+      'alphaMap',
+      'aoMap',
+      'aoMapIntensity',
+      'color',
+      'combine',
+      'emissive',
+      'emissiveMap',
+      'emissiveIntensity',
+      'envMap',
+      'lightMap',
+      'lightMapIntensity',
+      'map',
+      'reflectivity',
+      'refractionRatio',
+      'specularMap',
+      'wireframe',
+    ],
+  },
+  {
+    name: 'MeshPhongMaterial',
+    shortName: 'Phong',
+    properties: [
+      'alphaMap',
+      'aoMap',
+      'aoMapIntensity',
+      'bumpMap',
+      'bumpScale',
+      'color',
+      'combine',
+      'displacementMap',
+      'displacementScale',
+      'displacementBias',
+      'emissive',
+      'emissiveMap',
+      'emissiveIntensity',
+      'envMap',
+      'lightMap',
+      'lightMapIntensity',
+      'map',
+      'normalMap',
+      'normalMapType',
+      'normalScale',
+      'reflectivity',
+      'refractionRatio',
+      'shininess',
+      'specular',
+      'specularMap',
+      'wireframe',
+    ],
+  },
+  {
+    name: 'MeshStandardMaterial',
+    shortName: 'Standard',
+    properties: [
+      'alphaMap',
+      'aoMap',
+      'aoMapIntensity',
+      'bumpMap',
+      'bumpScale',
+      'color',
+      'displacementMap',
+      'displacementScale',
+      'displacementBias',
+      'emissive',
+      'emissiveMap',
+      'emissiveIntensity',
+      'envMap',
+      'envMapIntensity',
+      'lightMap',
+      'lightMapIntensity',
+      'map',
+      'metalness',
+      'metalnessMap',
+      'normalMap',
+      'normalMapType',
+      'normalScale',
+      'refractionRatio',
+      'roughness',
+      'roughnessMap',
+      'wireframe',
+    ],
+  },
+  {
+    name: 'MeshPhysicalMaterial',
+    shortName: 'Physical',
+    properties: [
+      'alphaMap',
+      'aoMap',
+      'aoMapIntensity',
+      'bumpMap',
+      'bumpScale',
+      'color',
+      'displacementMap',
+      'displacementScale',
+      'displacementBias',
+      'emissive',
+      'emissiveMap',
+      'emissiveIntensity',
+      'envMap',
+      'envMapIntensity',
+      'lightMap',
+      'lightMapIntensity',
+      'map',
+      'metalness',
+      'metalnessMap',
+      'normalMap',
+      'normalMapType',
+      'normalScale',
+      'refractionRatio',
+      'roughness',
+      'roughnessMap',
+      'wireframe',
+      'clearCoat',
+      'clearCoatRoughness',
+      'reflectivity',
+    ],
+  },
+];
+
+const allProperties = {};
+materials.forEach((material) => {
+  material.properties.forEach((property) => {
+    allProperties[property] = true;
+  });
+});
+
+function addElem(type, parent, content) {
+  const elem = document.createElement(type);
+  if (content) {
+    elem.textContent = content;
+  }
+  if (parent) {
+    parent.appendChild(elem);
+  }
+  return elem;
+}
+
+const table = document.createElement('table');
+const thead = addElem('thead', table);
+{
+  addElem('td', thead);
+  materials.forEach((material) => {
+    const td = addElem('td', thead);
+    const a = addElem('a', td, material.shortName);
+    a.href = `https://threejs.org/docs/#api/materials/${material.name}`;
+  });
+}
+Object.keys(allProperties).sort().forEach((property) => {
+  const tr = addElem('tr', table);
+  addElem('td', tr, property);
+  materials.forEach((material) => {
+    const hasProperty = material.properties.indexOf(property) >= 0;
+    const td = addElem('td', tr);
+    const a = addElem('a', td, hasProperty ? '•' : '');
+    a.href = `https://threejs.org/docs/#api/materials/${material.name}.${property}`;
+  });
+});
+document.querySelector('#material-table').appendChild(table);

threejs/lessons/ru/threejs-material-table.md

@@ -7,273 +7,6 @@ Mesh. Вот таблица, показывающая, какие функции
 
 <div>
 <div id="material-table" class="threejs_center"></div>
-<script>
-const materials = [
-  { 
-    name: 'MeshBasicMaterial',
-    shortName: 'Basic',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'color',
-      'combine',
-      'envMap',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'reflectivity',
-      'refactionRatio',
-      'specularMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshLambertMaterial',
-    shortName: 'Lambert',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'color',
-      'combine',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'reflectivity',
-      'refactionRatio',
-      'specularMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshPhongMaterial',
-    shortName: 'Phong',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'bumpMap',
-      'bumpScale',
-      'color',
-      'combine',
-      'displacementMap',
-      'displacementScale',
-      'displacementBias',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'normalMap',
-      'normalMapType',
-      'normalScale',
-      'reflectivity',
-      'refactionRatio',
-      'shininess',
-      'specular',
-      'specularMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshStandardMaterial',
-    shortName: 'Standard',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'bumpMap',
-      'bumpScale',
-      'color',
-      'displacementMap',
-      'displacementScale',
-      'displacementBias',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'evnMapIntensity',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'metalness',
-      'metalnessMap',
-      'normalMap',
-      'normalMapType',
-      'normalScale',
-      'refactionRatio',
-      'roughness',
-      'roughnessMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshPhysicalMaterial',
-    shortName: 'Physical',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'bumpMap',
-      'bumpScale',
-      'color',
-      'displacementMap',
-      'displacementScale',
-      'displacementBias',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'evnMapIntensity',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'metalness',
-      'metalnessMap',
-      'normalMap',
-      'normalMapType',
-      'normalScale',
-      'refactionRatio',
-      'roughness',
-      'roughnessMap',
-      'wireframe',
-      'clearCoat',
-      'clearCoatRoughness',
-      'reflectivity',
-    ],
-  },
-];
-
-const allProperties = {};
-materials.forEach((material) => {
-  material.properties.forEach((property) => {
-    allProperties[property] = true;
-  });
-});
-
-function addElem(type, parent, content) {
-  const elem = document.createElement(type);
-  if (content) {
-    elem.textContent = content;
-  }
-  if (parent) {
-    parent.appendChild(elem);
-  }
-  return elem;
-}
-
-const table = document.createElement('table');
-const thead = addElem('thead', table);
-{
-  addElem('td', thead);
-  materials.forEach((material) => {
-    const td = addElem('td', thead);
-    const a = addElem('a', td, material.shortName);
-    a.href = `https://threejs.org/docs/#api/materials/${material.name}`;
-  });
-}
-Object.keys(allProperties).sort().forEach((property) => {
-  const tr = addElem('tr', table);
-  addElem('td', tr, property);
-  materials.forEach((material) => {
-    const hasProperty = material.properties.indexOf(property) >= 0;
-    const td = addElem('td', tr);
-    const a = addElem('a', td, hasProperty ? '•' : '');
-    a.href = `https://threejs.org/docs/#api/materials/${material.name}.${property}`;
-  });
-});
-document.querySelector('#material-table').appendChild(table);
-</script>
-<style>
-#material-table {
-  font-family: monospace;
-  display: flex;
-  justify-content: center;
-}
-#material-table tr:nth-child(even) {
-    background: #def;
-}
-#material-table thead>td {
-    vertical-align: bottom;
-    padding: .5em;
-}
-#material-table thead>td>a {
-    text-orientation: upright;
-    writing-mode: vertical-lr;
-    text-decoration: none;
-    display: block;
-    letter-spacing: -2px;
-}
-#material-table table {
-    border-collapse: collapse;
-    background: #cde;
-}
-#material-table td:nth-child(1) {
-    text-align: right;
-}
-#material-table td {
-    border: 1px solid black;
-    padding: .1em .5em .1em .5em;
-}
-#material-table td {
-  border: 1px solid black;
-}
-@media (max-width: 500px) {
-  #material-table {
-    font-size: small;
-  }
-  #material-table thead>td {
-      vertical-align: bottom;
-      padding: .5em 0 .5em 0;
-  }
-}
-</style>
+<script src="resources/threejs-material-table.js"></script>
+<link rel="stylesheet" href="resources/threejs-material-table.css">
 </div>
-
-<!--
-```
-phong
-  normalScale: 1,1 (0-1)
-  reflectivity: 0.5 (0-1)
-  refactionRatio: ???
-
-
-
-
-  MeshStandardMaterial
-  alphaMap: green channel
-  aoMap  (needs UV map, red channel)
-  aoMapIntensity: 1
-  bumpMap
-  bumpScale: 1
-  color
-  displacementMap
-  displacementScale
-  displacementBias
-  emissive
-  emissiveMap
-  emissiveIntensity: 1
-  envMap
-  evnMapIntensity: 1
-  lightMap (needs map)
-  lightMapIntensity: 1
-  map
-  metalness: 0.5 (0-1)
-  metalnessMap: (blue)
-  normalMap
-  normalMapType:  THREE.TangentSpaceNormalMap (default), and
-                  THREE.ObjectSpaceNormalMap.
-  normalScale: 1,1 (0-1)
-  refactionRatio: ???
-  roughness: 0.5 (0-1)
-  roughnessMap: (green)
-   wireframe
-```
--->

threejs/lessons/threejs-material-table.md

@@ -1,5 +1,5 @@
 Title: Material Feature Table
-Description: A Table showing which matierals have which features
+Description: A Table showing which materials have which features
 TOC: Material Table
 
 The most common materials in three.js are the Mesh materials. Here
@@ -7,273 +7,7 @@ is a table showing which material support which features.
 
 <div>
 <div id="material-table" class="threejs_center"></div>
-<script>
-const materials = [
-  { 
-    name: 'MeshBasicMaterial',
-    shortName: 'Basic',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'color',
-      'combine',
-      'envMap',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'reflectivity',
-      'refactionRatio',
-      'specularMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshLambertMaterial',
-    shortName: 'Lambert',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'color',
-      'combine',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'reflectivity',
-      'refactionRatio',
-      'specularMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshPhongMaterial',
-    shortName: 'Phong',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'bumpMap',
-      'bumpScale',
-      'color',
-      'combine',
-      'displacementMap',
-      'displacementScale',
-      'displacementBias',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'normalMap',
-      'normalMapType',
-      'normalScale',
-      'reflectivity',
-      'refactionRatio',
-      'shininess',
-      'specular',
-      'specularMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshStandardMaterial',
-    shortName: 'Standard',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'bumpMap',
-      'bumpScale',
-      'color',
-      'displacementMap',
-      'displacementScale',
-      'displacementBias',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'evnMapIntensity',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'metalness',
-      'metalnessMap',
-      'normalMap',
-      'normalMapType',
-      'normalScale',
-      'refactionRatio',
-      'roughness',
-      'roughnessMap',
-      'wireframe',
-    ],
-  },
-  {
-    name: 'MeshPhysicalMaterial',
-    shortName: 'Physical',
-    properties: [
-      'alphaMap',
-      'aoMap',
-      'aoMapIntensity',
-      'bumpMap',
-      'bumpScale',
-      'color',
-      'displacementMap',
-      'displacementScale',
-      'displacementBias',
-      'emissive',
-      'emissiveMap',
-      'emissiveIntensity',
-      'envMap',
-      'evnMapIntensity',
-      'lightMap',
-      'lightMapIntensity',
-      'map',
-      'metalness',
-      'metalnessMap',
-      'normalMap',
-      'normalMapType',
-      'normalScale',
-      'refactionRatio',
-      'roughness',
-      'roughnessMap',
-      'wireframe',
-      'clearCoat',
-      'clearCoatRoughness',
-      'reflectivity',
-    ],
-  },
-];
-
-const allProperties = {};
-materials.forEach((material) => {
-  material.properties.forEach((property) => {
-    allProperties[property] = true;
-  });
-});
-
-function addElem(type, parent, content) {
-  const elem = document.createElement(type);
-  if (content) {
-    elem.textContent = content;
-  }
-  if (parent) {
-    parent.appendChild(elem);
-  }
-  return elem;
-}
-
-const table = document.createElement('table');
-const thead = addElem('thead', table);
-{
-  addElem('td', thead);
-  materials.forEach((material) => {
-    const td = addElem('td', thead);
-    const a = addElem('a', td, material.shortName);
-    a.href = `https://threejs.org/docs/#api/materials/${material.name}`;
-  });
-}
-Object.keys(allProperties).sort().forEach((property) => {
-  const tr = addElem('tr', table);
-  addElem('td', tr, property);
-  materials.forEach((material) => {
-    const hasProperty = material.properties.indexOf(property) >= 0;
-    const td = addElem('td', tr);
-    const a = addElem('a', td, hasProperty ? '•' : '');
-    a.href = `https://threejs.org/docs/#api/materials/${material.name}.${property}`;
-  });
-});
-document.querySelector('#material-table').appendChild(table);
-</script>
-<style>
-#material-table {
-  font-family: monospace;
-  display: flex;
-  justify-content: center;
-}
-#material-table tr:nth-child(even) {
-    background: #def;
-}
-#material-table thead>td {
-    vertical-align: bottom;
-    padding: .5em;
-}
-#material-table thead>td>a {
-    text-orientation: upright;
-    writing-mode: vertical-lr;
-    text-decoration: none;
-    display: block;
-    letter-spacing: -2px;
-}
-#material-table table {
-    border-collapse: collapse;
-    background: #cde;
-}
-#material-table td:nth-child(1) {
-    text-align: right;
-}
-#material-table td {
-    border: 1px solid black;
-    padding: .1em .5em .1em .5em;
-}
-#material-table td {
-  border: 1px solid black;
-}
-@media (max-width: 500px) {
-  #material-table {
-    font-size: small;
-  }
-  #material-table thead>td {
-      vertical-align: bottom;
-      padding: .5em 0 .5em 0;
-  }
-}
-</style>
+<script src="resources/threejs-material-table.js"></script>
+<link rel="stylesheet" href="resources/threejs-material-table.css">
 </div>
 
-<!--
-```
-phong
-  normalScale: 1,1 (0-1)
-  reflectivity: 0.5 (0-1)
-  refactionRatio: ???
-
-
-
-
-  MeshStandardMaterial
-  alphaMap: green channel
-  aoMap  (needs UV map, red channel)
-  aoMapIntensity: 1
-  bumpMap
-  bumpScale: 1
-  color
-  displacementMap
-  displacementScale
-  displacementBias
-  emissive
-  emissiveMap
-  emissiveIntensity: 1
-  envMap
-  evnMapIntensity: 1
-  lightMap (needs map)
-  lightMapIntensity: 1
-  map
-  metalness: 0.5 (0-1)
-  metalnessMap: (blue)
-  normalMap
-  normalMapType:  THREE.TangentSpaceNormalMap (default), and
-                  THREE.ObjectSpaceNormalMap.
-  normalScale: 1,1 (0-1)
-  refactionRatio: ???
-  roughness: 0.5 (0-1)
-  roughnessMap: (green)
-   wireframe
-```
--->