三、光源对物体表面的影响

歪日得dei

已于 2024-08-21 17:46:42 修改

阅读量315

点赞数 5

分类专栏： WebGL之Three.js学习文章标签：前端 vue.js typescript webgl

于 2024-08-21 17:15:54 首次发布

本文链接：https://blog.csdn.net/weixin_42426070/article/details/141397513

版权

WebGL之Three.js学习专栏收录该内容

4 篇文章

订阅专栏

1.受光照影响材质

（1）基础网格材质MeshBasicMaterial ()

不会受到光照影响。

  const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff, //青色
    transparent: true, //开启透明
    opacity: 0.5, //透明程度
  });

（2）漫反射网格材质MeshLambertMaterial ()

会受到光照影响，该材质也可以称为Lambert网格材质，音译为兰伯特网格材质。

 //   创建一个光源对象
  const poinLight = new THREE.PointLight(0xffffff, 1.0);
  poinLight.decay = 0.0; //不希望衰减 设置光源不随距离而衰减
  poinLight.position.set(400, 700, 400); //设置点光源的位置
  scene.add(poinLight);

2.光源简介

点光源

点光源PointLight (opens new window)可以类比为一个发光点，就像生活中一个灯泡以灯泡为中心向四周发射光线。

PointLight( color : Color, intensity : Float, distance : Number, decay : Float )

color -（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的 Color 对象。
intensity -（可选）光照强度。默认值为 1。
distance - 光源照射的最大距离。默认值为 0（无限远）。
decay - 沿着光照距离的衰退量。默认值为 2。

//点光源：两个参数分别表示光源颜色和光照强度
// 参数1：0xffffff是纯白光,表示光源颜色
// 参数2：1.0,表示光照强度，可以根据需要调整
const pointLight = new THREE.PointLight(0xffffff, 1.0);

（1）光照强度

除了通过THREE.PointLight的参数2设置光照强度，你可以可以直接访问光照强度属性.intensity设置。

pointLight.intensity = 1.0;//光照强度

（2）光源衰减

实际生活中点光源，比如比如一个灯泡，随机距离的改变，光线会衰减，越来越弱，光源衰减属性.decay默认值是2.0，如果你不希望衰减可以设置为0.0。

pointLight.decay = 0.0;//设置光源不随距离衰减

（3）光源位置

//点光源位置
pointLight.position.set(400, 0, 0);//点光源放在x轴上

（4）光源添加到场景

scene.add(pointLight); //点光源添加到场景中