1
0

threejs-material-table.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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. 'bumpMap',
  29. 'bumpScale',
  30. 'color',
  31. 'combine',
  32. 'displacementMap',
  33. 'displacementScale',
  34. 'displacementBias',
  35. 'emissive',
  36. 'emissiveMap',
  37. 'emissiveIntensity',
  38. 'envMap',
  39. 'lightMap',
  40. 'lightMapIntensity',
  41. 'map',
  42. 'normalMap',
  43. 'normalMapType',
  44. 'normalScale',
  45. 'reflectivity',
  46. 'refractionRatio',
  47. 'specularMap',
  48. 'wireframe',
  49. ],
  50. },
  51. {
  52. name: 'MeshPhongMaterial',
  53. shortName: 'Phong',
  54. properties: [
  55. 'alphaMap',
  56. 'aoMap',
  57. 'aoMapIntensity',
  58. 'bumpMap',
  59. 'bumpScale',
  60. 'color',
  61. 'combine',
  62. 'displacementMap',
  63. 'displacementScale',
  64. 'displacementBias',
  65. 'emissive',
  66. 'emissiveMap',
  67. 'emissiveIntensity',
  68. 'envMap',
  69. 'lightMap',
  70. 'lightMapIntensity',
  71. 'map',
  72. 'normalMap',
  73. 'normalMapType',
  74. 'normalScale',
  75. 'reflectivity',
  76. 'refractionRatio',
  77. 'shininess',
  78. 'specular',
  79. 'specularMap',
  80. 'wireframe',
  81. ],
  82. },
  83. {
  84. name: 'MeshStandardMaterial',
  85. shortName: 'Standard',
  86. properties: [
  87. 'alphaMap',
  88. 'aoMap',
  89. 'aoMapIntensity',
  90. 'bumpMap',
  91. 'bumpScale',
  92. 'color',
  93. 'displacementMap',
  94. 'displacementScale',
  95. 'displacementBias',
  96. 'emissive',
  97. 'emissiveMap',
  98. 'emissiveIntensity',
  99. 'envMap',
  100. 'envMapIntensity',
  101. 'lightMap',
  102. 'lightMapIntensity',
  103. 'map',
  104. 'metalness',
  105. 'metalnessMap',
  106. 'normalMap',
  107. 'normalMapType',
  108. 'normalScale',
  109. 'refractionRatio',
  110. 'roughness',
  111. 'roughnessMap',
  112. 'wireframe',
  113. ],
  114. },
  115. {
  116. name: 'MeshPhysicalMaterial',
  117. shortName: 'Physical',
  118. properties: [
  119. 'alphaMap',
  120. 'aoMap',
  121. 'aoMapIntensity',
  122. 'bumpMap',
  123. 'bumpScale',
  124. 'clearcoat',
  125. 'clearcoatMap',
  126. 'clearcoatRoughness',
  127. 'clearcoatRoughnessMap',
  128. 'clearcoatNormalScale',
  129. 'clearcoatNormalMap',
  130. 'color',
  131. 'displacementMap',
  132. 'displacementScale',
  133. 'displacementBias',
  134. 'emissive',
  135. 'emissiveMap',
  136. 'emissiveIntensity',
  137. 'envMap',
  138. 'envMapIntensity',
  139. 'iridescence',
  140. 'iridescenceMap',
  141. 'iridescenceIOR',
  142. 'iridescenceThicknessRange',
  143. 'iridescenceThicknessMap',
  144. 'lightMap',
  145. 'lightMapIntensity',
  146. 'ior',
  147. 'map',
  148. 'metalness',
  149. 'metalnessMap',
  150. 'normalMap',
  151. 'normalMapType',
  152. 'normalScale',
  153. 'refractionRatio',
  154. 'roughness',
  155. 'roughnessMap',
  156. 'sheen',
  157. 'sheenColor',
  158. 'sheenColorMap',
  159. 'sheenRoughness',
  160. 'sheenRoughnessMap',
  161. 'thickness',
  162. 'thicknessMap',
  163. 'transmission',
  164. 'transmissionMap',
  165. 'attenuationDistance',
  166. 'attenuationColor',
  167. 'specularIntensity',
  168. 'specularIntensityMap',
  169. 'specularColor',
  170. 'specularColorMap',
  171. 'wireframe',
  172. 'reflectivity',
  173. ],
  174. },
  175. ];
  176. const allProperties = {};
  177. materials.forEach( ( material ) => {
  178. material.properties.forEach( ( property ) => {
  179. allProperties[ property ] = true;
  180. } );
  181. } );
  182. function addElem( type, parent, content ) {
  183. const elem = document.createElement( type );
  184. if ( content ) {
  185. elem.textContent = content;
  186. }
  187. if ( parent ) {
  188. parent.appendChild( elem );
  189. }
  190. return elem;
  191. }
  192. const table = document.createElement( 'table' );
  193. const thead = addElem( 'thead', table );
  194. {
  195. addElem( 'td', thead );
  196. materials.forEach( ( material ) => {
  197. const td = addElem( 'td', thead );
  198. const a = addElem( 'a', td, material.shortName );
  199. a.href = `https://threejs.org/docs/#api/materials/${material.name}`;
  200. } );
  201. }
  202. Object.keys( allProperties ).sort().forEach( ( property ) => {
  203. const tr = addElem( 'tr', table );
  204. addElem( 'td', tr, property );
  205. materials.forEach( ( material ) => {
  206. const hasProperty = material.properties.indexOf( property ) >= 0;
  207. const td = addElem( 'td', tr );
  208. const a = addElem( 'a', td, hasProperty ? '•' : '' );
  209. a.href = `https://threejs.org/docs/#api/materials/${material.name}.${property}`;
  210. } );
  211. } );
  212. document.querySelector( '#material-table' ).appendChild( table );