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

在真实世界中，物体因为反射光进我们的眼中，而能被看见；因此，除了物体形状外，材质与光之间的关系是3D模拟的重要元素。

加上光源，创造立体感

上一篇使用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( );
scene.add( light );

除了环境光源AmbientLight外，Three.js还提供了模拟灯泡发光的点光源PointLight、聚光灯SpotLight、平面光光源RectAreaLight、模拟光源无限远的平行光DirectionalLight、场景上方的半球体光源HemisphereLight等，光源一样需要先利用new建构出来并将光源加进场景。

//建构基础聚光灯，并加进场景中
const spotLight = new THREE.SpotLight( );
scene.add( spotLight );

不同类型的光源可传入的参数不尽相同，多数可依照需求传入颜色color和光照强度intensity，在建构时传入相关数值即可定义出不同光源。另外，与光照强度intensity类似，控制光的强弱还有power光功率属性，像是点光源PointLight、聚光灯SpotLight都有提供，可以做对应设定。

//建构光源，第一个参数定义色光，第二个则为光照强度
const yellowSpotLight = new THREE.SpotLight( 0xffff00, 60 );
const redSpotLight = new THREE.SpotLight( 0xff0000, 60 );
const pointLight = new THREE.PointLight( 0xffff00 );

//设定光源的位置
yellowSpotLight.position.set( -3, 5, -1 );
redSpotLight.position.set( 3, 5, 6 );
pointLight.position.set( 0, 0, 1 );

//除了光照强度(intensity)外，也可以设定power改变光的强弱
pointLight.power= 80 *Math.PI;

//别忘了要将光源加进场景中！
scene.add( yellowSpotLight, redSpotLight, pointLight );

摄影机、物件和光源都具有position可以设定，可以分别指定x、y、z进行设定，或使用set()同时设定三轴数值。而定义旋转角度的rotation也与position相同，可以分别指定三轴数值，也可使用set()同时设定。

SpotLight.position.x = -3;
SpotLight.position.y = 5;
SpotLight.position.z = -1;
cube.rotation.set( 1, 1, 0 );