threejs-material-table.js 4.7 KB

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