THREE实战3_理解光源

光源

光的三原色:red、绿green、蓝blue
在这里插入图片描述
色彩模式: HSL、HSV。
色相Hue、饱和度Saturation、亮度Lightness、明度 Value。
白色反射所有光(白色的物体利于测试灯光)

Three.js 的光源类

1.环境光

把颜色添加到整个场景和对象的当前颜色上
maya环境光测试
一个蓝色的环境光渲染灰色box
THREE实战3_理解光源_第1张图片
THREE代码重构
环境光的特点:

  • 光源颜色影响整个场景
  • 没有特定的光源,不需要指定位置
  • 均匀照射,需要配和其它光源弱化阴影

构造函数声明
THREE.AmbientLight( hex );

function initLight() {
            var light=new THREE.AmbientLight(0x0000ff);//蓝色环境环境光
            var light_help=new THREE.SphereGeometry(16,16,16);
            light.add(new THREE.Mesh(light_help,new THREE.MeshBasicMaterial({color:0xffffff})));//蓝色球体
            scene.add(light);
            }
function initObject() {
            var r=10;
            // var geometry = new THREE.SphereBufferGeometry( r,16,16);
            var geometry = new THREE.CubeGeometry(300,300,300,);
            //白色反射所有光线
            var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );//白色
            var mesh = new THREE.Mesh( geometry,material);
            mesh.position = new THREE.Vector3(0,0,0);
            scene.add(mesh);
            }

THREE实战3_理解光源_第2张图片

2.点光源

点发散光,例如蜡烛、白炽灯
maya点光测试
maya创建点光源预览
THREE实战3_理解光源_第3张图片
three代码重构

点光源PolintLight的构造函数
PointLight(color,intensity,distance);

  • color颜色,16进制
  • intensity强度,默认1.0,100%强度
  • distance距离光源的距离,超过这个距离越远光的强度会减弱
        function initLight() {
            var light_point = new THREE.PointLight(0x0000FF,1,1000);//点光源,绿色,rgb
            light_point.position.set(20,80,200);
             var sphere = new THREE.SphereBufferGeometry( 10, 16, 16 );//添加一个球体
            light_point.add(new THREE.Mesh(sphere,new THREE.MeshBasicMaterial({color:0x0000ff})));//绿色球体
            scene.add(light_point);
        }

THREE实战3_理解光源_第4张图片

2.聚光灯

光源的光线从一个锥体射出,在被照射的物体上产生聚光效果。舞台灯光
有一个顶角α
maya聚光灯测试
THREE实战3_理解光源_第5张图片
three代码重构

聚光灯的构造函数
THREE.SpotLight(hex,intensity,distance,angle,exponent);
前三个通俗易懂

  • angle:聚光灯的角度,以弧度为单位,这个角度和光源方向形成的角度
  • exponent:衰减参数,越大衰减越快
				var spotLight = new THREE.SpotLight( 0xffffff, 1 );
				spotLight.position.set( 15, 40, 35 );
				spotLight.angle = Math.PI / 4;
				spotLight.penumbra = 0.05;
				spotLight.decay = 2;
				spotLight.distance = 200;

				spotLight.castShadow = true;
				spotLight.shadow.mapSize.width = 1024;
				spotLight.shadow.mapSize.height = 1024;
				spotLight.shadow.camera.near = 10;
				spotLight.shadow.camera.far = 200;
				scene.add( spotLight );

				lightHelper = new THREE.SpotLightHelper( spotLight );
				scene.add( lightHelper );

				shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera );
				scene.add( shadowCameraHelper );

THREE实战3_理解光源_第6张图片

3.平行光源(方向光)

平行光束,太阳光进入地球变成生活中的平行光。
maya平行光测试
THREE实战3_理解光源_第7张图片
平行光构造函数
THREEE.DirectionalLight=function(hex,instensizty);
three代码重构

            var light_direction=new THREE.DirectionalLight(0x0000FF,1);//方向光蓝色
            light_direction.position.set(10,20,6);
            var ld_help=new THREE.DirectionalLightHelper(light_direction,20,0x0000FF);
            scene.add(light_direction);//方向光
            scene.add(ld_help);

THREE实战3_理解光源_第8张图片

你可能感兴趣的:(threejs框架)