three.js浅谈@光源

光源种类

承接上一节讲了各种镜头，但是光有镜头还是无法看清东西的，因为需要光源
threejs中有6种光源

1. 环境光
2. 平行光
3. 点光
4. 聚光
5. 半球光
6. 面光

其中最常用是前四种

环境光

const light = new THREE.AmbientLight( '#fff',1);//参数是颜色和强度

这种光源是到处都存在的一种光源，各个点强度一致且没有方向
这种光源不会有阴影产生因此施加到一些材质上面会显示不出模型的轮廓，比如这样：

image.png

这其实是一个多面体

平行光

 const light = new THREE.DirectionalLight('#fff',1)
 light.position.set(-100,-69,20)//光方向

这是一种带有方向的光，但是各点的强度一致，因为有方向可以产生阴影，因此可以让模型得到明暗的变化表现出层次感，这种光源可以参考太阳光

image.png

这和上面的图是一个模型，但是因为阴影的关系可以看得出这是一个多面体的形状

点光和聚光

const light = new THREE.PointLight('#fff',1,0,2)//颜色，强度，光照距离，0表示无限，光衰减
light.position.set(-100,-60,20)//点光位置

const light = new THREE.SpotLight('#fff',1,0,Math.PI/4,0,0)//颜色，强度，光照距离，角度，半影，衰减
light.position.set(-100,-60,20)//聚光位置

这2种光线有方向性而且各点强度不一致，2者的不同点在于聚光只是照亮部分角度，而点光这是360度无死角

点光 聚光
可以参考蜡烛和电筒
材质

参考代码

const THREE= window.THREE=require('three')
const scene = new THREE.Scene();//创建一个场景
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z=150//因为刚刚创建的对象都会位于原点，我们需要把相机拉远一点
//创建一个渲染器,并设置大小，然后把这个渲染器加入到dom中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
/**
 * [light 环境光]
 * 颜色：白色
 * 强度：1
 */
//const light = new THREE.AmbientLight( '#fff',1);
/**
 * [light 平行光]
 */
// const light = new THREE.DirectionalLight('#fff',1)
// light.position.set(-100,-69,20)//光方向
/**
 * [light 点光源]
 * 颜色：白色
 * 强度：1，
 * 光线距离：0(表示无限远)
 * 衰减程度：2
 */
const light = new THREE.PointLight('#fff',1,0,2)
light.position.set(-100,-60,20)//光位置

//  const light = new THREE.SpotLight('#fff',1,0,Math.PI/12,0,0)
// light.position.set(-100,-60,100)//光位置
//创建一种材质
const mat = new THREE.MeshPhongMaterial({
    color: new THREE.Color("rgb(106,153,153)"),
    transparent: 1,
    opacity: 0.2,
    shininess:5,
    specular:new THREE.Color("rgb(153,153,153)"),
    emissive:new THREE.Color("rgb(6,53,53)"),
    shading: THREE.FlatShading 
});
//创建一个多面体模型，并将模型和材质结合
const ballGeometry = new THREE.IcosahedronGeometry(50,2);
const ball = new THREE.Mesh( ballGeometry, mat );

scene.add(light)//场景中加入光源
scene.add( camera )//场景中加入相机
scene.add( ball )//场景中加入多面体

renderer.render(scene, camera);