THREE实战3_理解光源

光源

光的三原色: 红red、绿green、蓝blue。

色彩模式: HSL、HSV。

色相Hue、饱和度Saturation、亮度Lightness、明度 Value。

白色反射所有光(白色的物体利于测试灯光)

Three.js 的光源类

1.环境光

把颜色添加到整个场景和对象的当前颜色上
maya环境光测试

一个蓝色的环境光渲染灰色box

THREE代码重构

环境光的特点:

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

构造函数声明

THREE.AmbientLight( hex );

javascript 复制代码
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);
            }
2.点光源

点发散光,例如蜡烛、白炽灯
maya点光测试

maya创建点光源预览

three代码重构

点光源PolintLight的构造函数

PointLight(color,intensity,distance);

  • color颜色,16进制
  • intensity强度,默认1.0,100%强度
  • distance距离光源的距离,超过这个距离越远光的强度会减弱
javascript 复制代码
        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);
        }
2.聚光灯

光源的光线从一个锥体射出,在被照射的物体上产生聚光效果。舞台灯光

有一个顶角α
maya聚光灯测试

three代码重构

聚光灯的构造函数

THREE.SpotLight(hex,intensity,distance,angle,exponent);

前三个通俗易懂

  • angle:聚光灯的角度,以弧度为单位,这个角度和光源方向形成的角度
  • exponent:衰减参数,越大衰减越快
javascript 复制代码
				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 );
3.平行光源(方向光)

平行光束,太阳光进入地球变成生活中的平行光。
maya平行光测试

平行光构造函数

THREEE.DirectionalLight=function(hex,instensizty);
three代码重构

javascript 复制代码
            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);
相关推荐
小菜全1 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js
Hilaku1 小时前
面试官开始问我AI了,前端的危机真的来了吗?
前端·javascript·面试
zheshiyangyang1 小时前
TypeScript学习【一】
javascript·学习·typescript
β添砖java2 小时前
案例二:登高千古第一绝句
前端·javascript·css
TNTLWT2 小时前
单例模式(C++)
javascript·c++·单例模式
落日沉溺于海3 小时前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手3 小时前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
an__ya__3 小时前
Vue数据响应式reactive
前端·javascript·vue.js
华仔啊3 小时前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅3 小时前
JavaScript 函数详解
前端·javascript