差不多Three.js的差不多分享系列（三）

qugemingzizhenmafan commented 3 years ago

Lights灯光

环境光

AmbientLight( color : Integer, intensity : Float ) 环境光会均匀的照亮场景中的所有物体。

预览：https://gltf-viewer.donmccurdy.com/

平行光(无限光)

DirectionalLight( color : Integer, intensity : Float ) 平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

属性

.position : Vector3 假如这个值设置等于 Object3D.DefaultUp (0, 1, 0),那么光线将会从上往下照射。

.target : Object3D 平行光的方向是从它的位置到目标位置。默认的目标位置为原点 (0,0,0)。注意: 对于目标的位置，要将其更改为除缺省值之外的任何位置,它必须被添加到 scene 场景中去。 scene.add( light.target );

这意味着它的方向是从一个平行光的位置 position 到 target的位置。预览：https://threejs.org/examples/#webgl_geometry_extrude_splines

半球光

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float ) 光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色。

预览：https://threejs.org/examples/#webgl_lights_hemisphere

点光源

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float ) 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。

预览：https://threejs.org/examples/#webgl_lensflares

平面光光源

RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float ) 平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。注意事项:

只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。

预览：https://threejs.org/examples/#webgl_lights_rectarealight

聚光灯

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float ) 聚光灯是从一个方向上的一个点发出，沿着一个圆锥体，它离光越远，它的尺寸就越大。

预览：https://threejs.org/examples/#webgl_lights_spotlight

qugemingzizhenmafan commented 3 years ago

灯光helper类

DirectionalLightHelper HemisphereLightHelper PointLightHelper RectAreaLightHelper SpotLightHelper 灯光的辅助类，直观地展现灯光本身。除了环境光都有。

qugemingzizhenmafan commented 3 years ago

阴影

能产生阴影的光源

平行光点光源聚光灯

不能产生阴影的光源

环境光半球光平面光

阴影相机

.shadow.camera 这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中。只有处于相机视野里的物体才会有阴影效果。

阴影效果需要开启的参数

渲染器

renderer.shadowMap.enabled = true renderer.shadowMap.type = THREE.PCFSoftShadowMap

灯光

light.castShadow = true 阴影相机视野区域

物体

mesh.castShadow = true // 此物体会导致阴影的产生 mesh.receiveShadow = true // 此物体会接收物体（其他或自身）产生的阴影

qugemingzizhenmafan commented 3 years ago

环境贴图

更好地模拟自然光下的情况

加载环境贴图

const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
new RGBELoader().setDataType(THREE.UnsignedByteType).load(
        path,
        texture => {
          const renderTarget = pmremGenerator.fromEquirectangular(texture);
          const envMap = renderTarget.texture;
          pmremGenerator.dispose();

          // 第一种方式，加给背景
          this.scene.environment = envMap; // 给场景添加环境光(贴图)效果

          // 第二种方式，加给物体
          if (obj && obj.isMesh) {
              const materials = obj.material;
              if (Array.isArray(materials)) {
                materials.forEach(material => {
                  material.envMap = envMap;
                  if (envMapIntensity) material.envMapIntensity = envMapIntensity;
                  material.needsUpdate = true;
                });
              } else {
                materials.envMap = envMap;
                if (envMapIntensity) materials.envMapIntensity = envMapIntensity;
                materials.needsUpdate = true;
              }
           }
        }
);

材质里的环境贴图

Material(材质) .envMap .envMapIntensity

qugemingzizhenmafan / blog