在Three.js系列第一篇有提到，物件的材質與光源是3D的重要元素之一，Three.js也有相關的設定。

建立具有「材質」的立體圖型

Three.js提供多種不同材質，基本上與渲染的運算方式與技術有關，像是不受光源影響的MeshBasicMaterial、具有鏡面光澤適合模擬光滑表面的MeshPhongMaterial、不具光澤的MeshLambertMaterial，以及比MeshPhongMaterial和MeshLambertMaterial更精緻但也更耗效能、基於物理表現的渲染 (Physically Based Rendering, PBR) 的MeshStandardMaterial等，都可依照需求選擇使用。

材質一樣需要先利用new建構出材質後，再利用Mesh網格來生成物件，只需要將建構出來的圖型與材質作為參數傳入即可。

//建構立體圖形
const boxGeometry = new THREE.BoxGeometry();
//建構基礎材質
const material = new THREE.MeshBasicMaterial( { color: 0xa45 } );
//mesh產生具有材質的物件
const cube = new THREE.Mesh( boxGeometry, material );

MeshStandardMaterial會受到光源影響，能呈現更自然的立體感，同時，若沒有任何光源，儘管物體有成功被渲染出來，也會因為沒有光從物體反射出去，所以「無法被看見」；因此，使用MeshStandardMaterial需要一併加上光源，這邊使用的是不具方向的環境光源AmbientLight，物體將會與真實世界一般，反射光而被看見。

const boxGeometry = new THREE.BoxGeometry();
//改用會受光源影響的MeshStandardMaterial
const material = new THREE.MeshStandardMaterial( { color: 0xa45} );
const cube = new THREE.Mesh( boxGeometry, material );

//建構環境光源
const light = new THREE.AmbientLight( 0xffffff );
//將光源加進場景中
scene.add( light );