threejs-material-table.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. const materials = [
  2. {
  3. name: 'MeshBasicMaterial',
  4. shortName: 'Basic',
  5. properties: [
  6. 'alphaMap',
  7. 'aoMap',
  8. 'aoMapIntensity',
  9. 'color',
  10. 'combine',
  11. 'envMap',
  12. 'lightMap',
  13. 'lightMapIntensity',
  14. 'map',
  15. 'reflectivity',
  16. 'refractionRatio',
  17. 'specularMap',
  18. 'wireframe',
  19. ],
  20. },
  21. {
  22. name: 'MeshLambertMaterial',
  23. shortName: 'Lambert',
  24. properties: [
  25. 'alphaMap',
  26. 'aoMap',
  27. 'aoMapIntensity',
  28. 'color',
  29. 'combine',
  30. 'emissive',
  31. 'emissiveMap',
  32. 'emissiveIntensity',
  33. 'envMap',
  34. 'lightMap',
  35. 'lightMapIntensity',
  36. 'map',
  37. 'reflectivity',
  38. 'refractionRatio',
  39. 'specularMap',
  40. 'wireframe',
  41. ],
  42. },
  43. {
  44. name: 'MeshPhongMaterial',
  45. shortName: 'Phong',
  46. properties: [
  47. 'alphaMap',
  48. 'aoMap',
  49. 'aoMapIntensity',
  50. 'bumpMap',
  51. 'bumpScale',
  52. 'color',
  53. 'combine',
  54. 'displacementMap',
  55. 'displacementScale',
  56. 'displacementBias',
  57. 'emissive',
  58. 'emissiveMap',
  59. 'emissiveIntensity',
  60. 'envMap',
  61. 'lightMap',
  62. 'lightMapIntensity',
  63. 'map',
  64. 'normalMap',
  65. 'normalMapType',
  66. 'normalScale',
  67. 'reflectivity',
  68. 'refractionRatio',
  69. 'shininess',
  70. 'specular',
  71. 'specularMap',
  72. 'wireframe',
  73. ],
  74. },
  75. {
  76. name: 'MeshStandardMaterial',
  77. shortName: 'Standard',
  78. properties: [
  79. 'alphaMap',
  80. 'aoMap',
  81. 'aoMapIntensity',
  82. 'bumpMap',
  83. 'bumpScale',
  84. 'color',
  85. 'displacementMap',
  86. 'displacementScale',
  87. 'displacementBias',
  88. 'emissive',
  89. 'emissiveMap',
  90. 'emissiveIntensity',
  91. 'envMap',
  92. 'envMapIntensity',
  93. 'lightMap',
  94. 'lightMapIntensity',
  95. 'map',
  96. 'metalness',
  97. 'metalnessMap',
  98. 'normalMap',
  99. 'normalMapType',
  100. 'normalScale',
  101. 'refractionRatio',
  102. 'roughness',
  103. 'roughnessMap',
  104. 'wireframe',
  105. ],
  106. },
  107. {
  108. name: 'MeshPhysicalMaterial',
  109. shortName: 'Physical',
  110. properties: [
  111. 'alphaMap',
  112. 'aoMap',
  113. 'aoMapIntensity',
  114. 'bumpMap',
  115. 'bumpScale',
  116. 'color',
  117. 'displacementMap',
  118. 'displacementScale',
  119. 'displacementBias',
  120. 'emissive',
  121. 'emissiveMap',
  122. 'emissiveIntensity',
  123. 'envMap',
  124. 'envMapIntensity',
  125. 'lightMap',
  126. 'lightMapIntensity',
  127. 'map',
  128. 'metalness',
  129. 'metalnessMap',
  130. 'normalMap',
  131. 'normalMapType',
  132. 'normalScale',
  133. 'refractionRatio',
  134. 'roughness',
  135. 'roughnessMap',
  136. 'wireframe',
  137. 'clearcoat',
  138. 'clearcoatRoughness',
  139. 'reflectivity',
  140. ],
  141. },
  142. ];
  143. const allProperties = {};
  144. materials.forEach((material) => {
  145. material.properties.forEach((property) => {
  146. allProperties[property] = true;
  147. });
  148. });
  149. function addElem(type, parent, content) {
  150. const elem = document.createElement(type);
  151. if (content) {
  152. elem.textContent = content;
  153. }
  154. if (parent) {
  155. parent.appendChild(elem);
  156. }
  157. return elem;
  158. }
  159. const table = document.createElement('table');
  160. const thead = addElem('thead', table);
  161. {
  162. addElem('td', thead);
  163. materials.forEach((material) => {
  164. const td = addElem('td', thead);
  165. const a = addElem('a', td, material.shortName);
  166. a.href = `https://threejs.org/docs/#api/materials/${material.name}`;
  167. });
  168. }
  169. Object.keys(allProperties).sort().forEach((property) => {
  170. const tr = addElem('tr', table);
  171. addElem('td', tr, property);
  172. materials.forEach((material) => {
  173. const hasProperty = material.properties.indexOf(property) >= 0;
  174. const td = addElem('td', tr);
  175. const a = addElem('a', td, hasProperty ? '•' : '');
  176. a.href = `https://threejs.org/docs/#api/materials/${material.name}.${property}`;
  177. });
  178. });
  179. document.querySelector('#material-table').appendChild(table);