来阿、来阿、都来看看three.js中的几种光源有何不同-技术圈

在three.js中如果不设置光源，就算几何体设置了颜色，看到的物体也将会是漆黑一片。但是three中有分为好几种光源，他有什么不同呢，接下来我们一起来看一下这几种光源的不同之处。

Ambintlight

THREE.AmbientLight 环境光，是一种最常见的光源。环境光会均匀照亮所有物体，它 没有投影效果 ，因为它是没有方向的。

//  环境光 参数1：光线颜色    参数2：关照强度scene.add(new THREE.AmbientLight(0xffffff, 1))

重点 - 投影

要在three中显示投影，条件其实还是挺多的。不要问我怎么知道的，因为我踩了好久/(ㄒoㄒ)/~~

渲染器：renderer.shadowMap.enabled = true; 渲染器要允许渲染光源
平板：plane.receiveShadow = true; 可以接受光源
灯光：point.castShadow = true; 灯光需要开启允许渲染阴影
灯光：只能使用可以渲染投影的光源
几何体 || 模型：meshrial.castShadow = true; 同上需要允许渲染
几何体：需要使用 MeshLambertMaterial 材质 (其他材质我们在后期测试更新)

PointLight

THREE.PointLight 点光源。从一个方向向各个方向发送的光源。就如同我们生活的中电灯泡，可以照亮一大片，被挡住的地方还有或投影的出现。

function light() {    //  环境光    scene.add(new THREE.AmbientLightProbe(0xffffff, 1));        // 点光源    let point = new THREE.PointLight(        0x00ff00,   //  光照颜色        1,          //  光照强度        1000,       //  光照最大距离        Math.PI / 2,    //  光照角度最大为Math.PI / 2    );    point.position.set(20, 50, 10); //  设置光源的xyz坐标位置    point.castShadow = true;    //  渲染到阴影中    scene.add(point);    //  模拟光源位置    let pointHelper = new THREE.PointLightHelper(        point,  //  要模拟的光源        2,      //  模拟的尺寸        0xff0000    );    scene.add(pointHelper)}

PostLight

THREE.PostLight 聚光灯，从一个点射出，沿着光线变远，圆锥体也会逐渐增大。

function light() {    //  环境光    scene.add(new THREE.AmbientLightProbe(0xffffff, 1));    let spot = new THREE.SpotLight(        0xffff00,   //  光照颜色        1,          //  光照强度        50,         //  光照最大距离        Math.PI / 1.2,    //  光照角度最大为Math.PI / 2        1,          //  半影衰减百分比 0-1 之间        0           //  光照距离衰减量 0-1 之间    );    spot.castShadow = true;    spot.position.set(10, 20, 10);    scene.add(spot);    //  模拟灯光位置    let helper = new THREE.SpotLightHelper(        spot,       //  光源        0x00ffff    //  模拟物体颜色    );    scene.add(helper)}

DirectionalLight

THREE.DirectionalLight 平行光。这种关照是无线远并且是平行发出。通常用来 模拟太阳光 。

function light() {    //  环境光    scene.add(new THREE.AmbientLightProbe(0xffffff, 1));    //  平行光    const directional = new THREE.DirectionalLight(        0x00ff00,   //  光照颜色        1 //  光照前端    );    directional.position.set(10, 20, 10)    directional.castShadow = true;    scene.add(directional);    //  模拟平行光位置    scene.add(new THREE.DirectionalLightHelper(        directional,    //  灯光体        5,   //  平板大小        0xff0000    //  平板颜色    ));}

列举了几种比较常用的光源分享给大家。大家可以加我qdwdss一起学习啊。

https://github.com/qdwds/three.js