three.js 平行光与阴影及其相关属性

基础篇：three.js 基础认识与简单应用

纹理贴图：three.js 纹理贴图的使用

纹理贴图进阶： three.js纹理贴图进阶

一、灯光与阴影的关系与设置 -- 五个步骤缺一不可 （点、聚会再次赘述）

 目标：灯光与阴影

• 环境光无阴影
• 平行光(太阳光)，点光源(电灯泡-四处发光)，聚光灯（八）

 1、材质要满足能够对光照有反应

•  最常用-标准网格材质(MeshStandardMaterial)
•  更消耗性能-物理网格材质(MeshPhysicalMaterial)-MeshStandardMaterial的扩展，提供了更高级的基于物理的渲染属性：

 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;

 3、设置光照投射阴影 directionalLight.castShadow = true;

 4、设置物体投射阴影 sphere.castShadow = true;

 5、设置物体接收阴影 plane.receiveShadow = true; 

示例：运行结果如下

 全部代码如下，解析见代码注释：

/*
 * @Description:  灯光与阴影的关系与设置 -- 五个步骤缺一不可
 */

import * as THREE from "three";
// 导入轨道控制器(鼠标控制)
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

/**
 * 目标：灯光与阴影--环境光无阴影，平行光(太阳光)，点光源(电灯泡-四处发光)，聚光灯(八)
 * 灯光阴影
 * 1、材质要满足能够对光照有反应
        --最常用-标准网格材质(MeshStandardMaterial)
 *      --更消耗性能-物理网格材质(MeshPhysicalMaterial)-MeshStandardMaterial的扩展，
         提供了更高级的基于物理的渲染属性：
 * 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;
 * 3、设置光照投射阴影 directionalLight.castShadow = true;
 * 4、设置物体投射阴影 sphere.castShadow = true;
 * 5、设置物体接收阴影 plane.receiveShadow = true;
 */

/*
 *1. 创建场景
 */
const scene = new THREE.Scene();

/*
 * 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)
 */
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度
  window.innerWidth / window.innerHeight, // 长宽比
  0.1, // 进截面
  1000 // 远截面
);
// 设置相机位置
camera.position.set(7, 7, 7);
scene.add(camera); // 将相机添加到场景中

/*
 *  添加物体
 */
// 创建几何体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);

// 1). 设置材质-标准网格材质
const material = new THREE.MeshStandardMaterial();

// 生成几何体
const sphere = new THREE.Mesh(sphereGeometry, material);

// 4). 投射阴影 --对象是否被渲染到阴影贴图中--三维物体（Object3D）
sphere.castShadow = true;

scene.add(sphere);

/**
 * 创建底部平面
 */
const planeGeometry = new THREE.PlaneBufferGeometry(10, 10);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;

// 5). 接收阴影
plane.receiveShadow = true;

scene.add(plane);

/**
 * 灯光
 */
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源（平行光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置平行光的位置
directionalLight.position.set(10, 10, 10);

// 3). 设置平行光产生动态阴影
directionalLight.castShadow = true;

scene.add(directionalLight);

/**
 *  3.初始化渲染器
 */
const renderer = new THREE.WebGL1Renderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 2). 开启场景中的阴影贴图--允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true;

// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

/**
 * 创建轨道控制器（OrbitControls）
 * 可以使得相机围绕目标进行轨道运动
 */
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环render()中调用update()
controls.enableDamping = true;
// controls.autoRotate = true;
// controls.autoRotateSpeed = 2; // 自转速度

/**
 * 辅助三维坐标系
 * 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
 */
var axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);

// 定义循环渲染方法
function render() {
  renderer.render(scene, camera); // 执行渲染操作
  controls.update(); // 加不加都行
  requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();

// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {
  // console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

 

二、平行光THREE.DirectionalLight

 介绍：

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

构造器：        

        DirectionalLight( color : Integer, intensity : Float )

                color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
                intensity - (可选参数) 光照的强度。缺省值为1。

与点光源和聚光灯的区别：

        最大的区别就是，点光源和聚光灯光源距离物体越远光线越暗。光是从一点发出的。
而被平行光照亮的整个区域接收到的光强是一样的。光是平行的。

平行光的特点：

        由于模型的阴影渲染会消耗很多的性能，所以我们需要设置平行光相关的区域能够显示阴影，和阴影显示的良好程度。如下几个属性：

        

        //这两个值决定使用多少像素生成阴影 默认512
        directionalLight.shadow.mapSize.height = 2048;
        directionalLight.shadow.mapSize.width = 2048;

        或者 

        directionalLight.shadow.mapSize.set(2048, 2048);

        // 设置阴影贴图模糊度

        directionalLight.shadow.radius = 20;

        // 设置平行光投射相机的属性

        directionalLight.shadow.camera.near = 0.5; //产生阴影的最近距离
        directionalLight.shadow.camera.far = 500; //产生阴影的最远距离
        directionalLight.shadow.camera.left = -5; //产生阴影距离位置的最左边位置
        directionalLight.shadow.camera.right = 5; //最右边
        directionalLight.shadow.camera.top = 5; //最上边
        directionalLight.shadow.camera.bottom = -5; //最下面

 示例：运行结果如下

通过 near 的变化：

// 设置阴影贴图模糊度

directionalLight.shadow.radius = 20;

// 设置阴影贴图的分辨率

directionalLight.shadow.mapSize.set(2048, 2048);

// 设置平行光投射相机的属性

directionalLight.shadow.camera.near = 0.5;

directionalLight.shadow.camera.far = 500;

directionalLight.shadow.camera.top = 5;

directionalLight.shadow.camera.bottom = -5;

directionalLight.shadow.camera.left = -5;

directionalLight.shadow.camera.right = 5;

  通过更改分辨率（2048 --> 512）:

// 设置阴影贴图模糊度

directionalLight.shadow.radius = 20;

// 设置阴影贴图的分辨率

directionalLight.shadow.mapSize.set(512, 512);

// 设置平行光投射相机的属性

directionalLight.shadow.camera.near = 0.5;

directionalLight.shadow.camera.far = 500;

directionalLight.shadow.camera.top = 5;

directionalLight.shadow.camera.bottom = -5;

directionalLight.shadow.camera.left = -5;

directionalLight.shadow.camera.right = 5;

通过更改模糊度(20 -- > 120)：

// 设置阴影贴图模糊度

directionalLight.shadow.radius = 120;

// 设置阴影贴图的分辨率

directionalLight.shadow.mapSize.set(2048, 2048);

// 设置平行光投射相机的属性

directionalLight.shadow.camera.near = 0.5;

directionalLight.shadow.camera.far = 500;

directionalLight.shadow.camera.top = 5;

directionalLight.shadow.camera.bottom = -5;

directionalLight.shadow.camera.left = -5;

directionalLight.shadow.camera.right = 5;

  全部代码如下，解析见代码注释：

/*
 * @Description:  平行光(DirectionalLight)阴影属性与阴影相机原理
 */

// 导入dat.gui可视化工具
import * as dat from "dat.gui";
import * as THREE from "three";
// 导入轨道控制器(鼠标控制)
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

/**
 * 目标：灯光与阴影--环境光无阴影，平行光(太阳光)，点光源(电灯泡-四处发光)，聚光灯(八)
 * 灯光阴影
 * 1、材质要满足能够对光照有反应
        --最常用-标准网格材质(MeshStandardMaterial)
 *      --更消耗性能-物理网格材质(MeshPhysicalMaterial)-MeshStandardMaterial的扩展，
         提供了更高级的基于物理的渲染属性：
 * 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;
 * 3、设置光照投射阴影 directionalLight.castShadow = true;
 * 4、设置物体投射阴影 sphere.castShadow = true;
 * 5、设置物体接收阴影 plane.receiveShadow = true;
 */
/*
 *1. 创建场景
 */
const scene = new THREE.Scene();

/*
 * 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)
 */
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度
  window.innerWidth / window.innerHeight, // 长宽比
  0.1, // 进截面
  1000 // 远截面
);
// 设置相机位置
camera.position.set(7, 7, 7);
scene.add(camera); // 将相机添加到场景中

/*
 *  添加物体
 */
// 创建几何体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
// 1). 设置材质
const material = new THREE.MeshStandardMaterial();
// 生成几何体
const sphere = new THREE.Mesh(sphereGeometry, material);
// 4). 投射阴影 --对象是否被渲染到阴影贴图中--三维物体（Object3D）
sphere.castShadow = true;
scene.add(sphere);

/**
 * 创建平面
 */
const planeGeometry = new THREE.PlaneBufferGeometry(10, 10);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
// 5). 接收阴影
plane.receiveShadow = true;
scene.add(plane);

/**
 * 灯光
 */
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

// 直线光源（平行光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置平行光的位置
directionalLight.position.set(10, 10, 10);
// 3). 设置平行光产生动态阴影
directionalLight.castShadow = true;

// 设置阴影贴图模糊度
directionalLight.shadow.radius = 20;
// 设置阴影贴图的分辨率
directionalLight.shadow.mapSize.set(2048, 2048);

// 设置平行光投射相机的属性
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.top = 5;
directionalLight.shadow.camera.bottom = -5;
directionalLight.shadow.camera.left = -5;
directionalLight.shadow.camera.right = 5;

scene.add(directionalLight);

const gui = new dat.GUI();
gui
  .add(directionalLight.shadow.camera, "near")
  .min(0)
  .max(20)
  .step(0.1)
  .onChange(() => {
    directionalLight.shadow.camera.updateProjectionMatrix();
  });

/**
 *  3.初始化渲染器
 */
const renderer = new THREE.WebGL1Renderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 2). 开启场景中的阴影贴图--允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true;

// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

/**
 * 创建轨道控制器（OrbitControls）
 * 可以使得相机围绕目标进行轨道运动
 */
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环render()中调用update()
controls.enableDamping = true;
// controls.autoRotate = true;
// controls.autoRotateSpeed = 2; // 自转速度

/**
 * 辅助三维坐标系
 * 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
 */
var axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);

// 定义循环渲染方法
function render() {
  renderer.render(scene, camera); // 执行渲染操作
  controls.update(); // 加不加都行
  requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();

// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {
  // console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});