對於不同的光線佈置，不同的材質會有不同的反應，到目前為止，其實已經使用過一些材質（Material），在建立 3D 物件後，還沒有任何貼圖前，使用的就是基本材質（Basic material）。
在過去的 p5.js，本來也有個 basicMaterial 函式，可以指定基本材質顏色，不過與 fill 的功能及效果重疊，因此就棄用了，想要指定基本材質的顏色，使用 fill 就可以了，基本材質不會吸收顏色、不會有螢光、不會有鏡面等效果。
在〈貼圖入門〉透過 texture 指定圖片貼圖，也是一種材質，對光線的反應等同於基本材質，在〈光線佈置〉中，你已經看過一些結合光線的示範了。
p5.js 提供 ambientMaterial，設定的材質可以指定會反射的光線顏色，例如，若光線是 ambientLight(255, 0, 0)，並指定了 ambientMaterial(255, 0, 0)，那麼會看到紅色，然而如果指定了 ambientMaterial(0, 255, 0)，由於紅色完全不反射，你只會看到黑色了。
ambientMaterial可以不一定搭配 ambientLight，光線佈置函式都可以與之作用，例如 directionalLight 的例子，底下的立方體只會反射方向光的紅色部份：
emissiveMaterial 是就算沒有光線，也會顯現顏色的材質，主要可以搭配 ambientLight，如果你使用 ambientLight(0)，可以製作一片黑的效果：
若將上例的註解符號移除，立方體就會看得見，emissiveMaterial 的 emissive 雖然是螢光的意思，不過 emissiveMaterial 是材質設定，不是光線，因而其實並不是發出螢光，也就不會影響其他的 3D 物件。
ambientLight(0) 與 noLights() 要區別一下，ambientLight(0) 相當於完全關燈效果，也就是仍有 ambientLight 的效果，而 `noLights() 是關閉全部的光線函式效果。
specularMaterial 可以對光線的反應會有鏡面效果，也就看來更亮：
可以透過 specularColor 來設定對哪種顏色有鏡面效果，透過 shininess 來設定光澤度，例如：
你可以試著調整 shininess、specularColor 的值，或將之註解掉，看看會有什麼樣的效果；另外，p5.js 還有個 normalMaterial，它完全不會受光線影響，基本上是用來除錯用的，然而只對內建的 3D 物件或載入的 .stl、.obj 有用，面向 x 軸的面會是紅色，y 軸是綠色，z 軸是藍色。
在使用 beginShape 等自訂 3D 物件時，建立出來的面視為在 xy 平面，面向 z 軸，因此使用 normalMaterial 時，你的 3D 物件每個面看來都會是同一個顏色，旋轉後也是如此（要說為什麼會如此，應該是因為 beginShape 基本上是從 2D 函式延伸而來，並不是原生針對 WebGL 設計的函式）。