JS Library 学习笔记：Three.js 初见面，在2D画面创造三维世界 (三)

在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 );