Threejs开发笔记之三光源

光源的种类

光源名称 描述
AmbientLight(环境光源) 颜色会直接作用物体的当前颜色上
PointLight(点光源) 一个点向所有方向
SpotLight(聚光灯) 聚光灯效果(范围)例如台灯
DirectionalLight(方向光源) 平行光源 例如太阳光
HemisphereLight(半球光) 创造自然室外光线,模拟反光和光线微弱的天空,太阳升降
AreaLight(面光源) 可指定光线的面
LensFlare(镜头炫光) 给光源添加炫光效果

AmbientLight-环境光源

特点是作用所有的物体上,并且不会产生阴影效果

var ambiColor = "#0c0c0c";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);

//THREE的Color对象
//可以有不同的设置方法(十六进制)(CSS)(RGB)(HSV)。。。。
setStyle(css)//css

PointLight-点光源

var pointColor = "#ccffcc";//颜色
var pointLight = new THREE.PointLight(pointColor);//实例化
pointLight.distance = 100;//距离
pointLight.intensity = 1;//强度 默认为1
pointLight.visible =true//开关,默认开
scene.add(pointLight);

SpotLight-聚光灯

var spotLight0 = new THREE.SpotLight(0xcccccc);//实例化
spotLight0.position.set(-40, 30, -10);//位置
spotLight0.lookAt(plane);//望向
scene.add(spotLight0);


spotLight.castShadow = true;//能否产生阴影 默认不能
spotLight.shadowCameraNear = 2;//投影近点
spotLight.shadowCameraFar = 200;//投影远点
spotLight.shadowCameraFov = 30;//视场有多大
spotLight.target = plane;//聚焦点
spotLight.distance = 0;//距离
spotLight.angle = 0.4;//角度

spotLight.shadowCameraVisible = true;//开启调试模式

//根据光锥设置光的属性

Threejs开发笔记之三光源_第1张图片

你可能感兴趣的:(【前端】)