Three.js学习06

提示：本系列文章参考http://www.webgl3d.cn/Three.js/的three.js教程。

---

前言

本篇主要介绍不同的光源给几何体添加阴影，以及给接收阴影的平面添加光照贴图。

---

一、设置阴影

1.方向光

效果如下：

首先在场景里创建几何体，即产生投影的对象，这里以长方体为例。
将模型加入场景后加入下面这句，设置产生投影的网格模型。

// 设置产生投影的网格模型
    mesh.castShadow = true;

然后在场景里创建一个平面，即接收投影的对象，这里以矩形平面为例。
将网格模型planeMesh 添加到场景中后，加入下面，设置阴影的投影面。

planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
    planeMesh.position.y = -50; //设置网格模型y坐标
    // 设置接收阴影的投影面
    planeMesh.receiveShadow = true;

将环境光设置完后设置方向光，加入下面，计算阴影。

// 设置用于计算阴影的光源对象
    directionalLight.castShadow = true;
    // 设置计算阴影的区域，最好刚好紧密包围在对象周围
    // 计算阴影的区域过大：模糊  过小：看不到或显示不完整
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 300;
    directionalLight.shadow.camera.left = -50;
    directionalLight.shadow.camera.right = 50;
    directionalLight.shadow.camera.top = 200;
    directionalLight.shadow.camera.bottom = -100;

最后在渲染器对象后面，设置阴影map为真。

renderer.shadowMap.enabled = true;

完整的代码如下：

<script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry(40, 100, 40);
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });
    var mesh = new THREE.Mesh(geometry, material);
    // mesh.position.set(0,0,0)
    scene.add(mesh);

    // 设置产生投影的网格模型
    mesh.castShadow = true;

    //创建一个平面几何体作为投影面
    var planeGeometry = new THREE.PlaneGeometry(300, 200);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x999999,
        side: THREE.DoubleSide, //两面可见
    }); //材质对象Material

    // 平面网格模型作为投影面
    var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象Mesh
    scene.add(planeMesh); //网格模型添加到场景中
    planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
    planeMesh.position.y = -50; //设置网格模型y坐标
    // 设置接收阴影的投影面
    planeMesh.receiveShadow = true;

    /**
     * 光源设置
     */
    //环境光   环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient); //环境光对象添加到scene场景中

    // 方向光
    var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // 设置光源位置
    directionalLight.position.set(60, 100, 40);
    scene.add(directionalLight);
    // 设置用于计算阴影的光源对象
    directionalLight.castShadow = true;
    // 设置计算阴影的区域，最好刚好紧密包围在对象周围
    // 计算阴影的区域过大：模糊  过小：看不到或显示不完整
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 300;
    directionalLight.shadow.camera.left = -50;
    directionalLight.shadow.camera.right = 50;
    directionalLight.shadow.camera.top = 200;
    directionalLight.shadow.camera.bottom = -100;


    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axesHelper = new THREE.AxesHelper(1000);
    scene.add(axesHelper);

    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    renderer.shadowMap.enabled = true;
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render
    }
    render();
    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    // 已经通过requestAnimationFrame(render);周期性执行render函数，没必要再通过监听鼠标事件执行render函数
    // controls.addEventListener('change', render)



</script>

2.聚光光源

效果如下：

创建产生阴影的几何体和接收阴影等步骤和上面方向光一样，设置聚光光源计算阴影代码如下。
SpotLightHelper()方法帮助展现聚光光源的光线。

// 聚光光源
    var spotLight = new THREE.SpotLight(0xffffff);
    // 设置聚光光源位置
    spotLight.position.set(80, 150, 80);
    // 设置聚光光源发散角度
    spotLight.angle = Math.PI /6;
    scene.add(spotLight); //光对象添加到scene场景中
    // 设置用于计算阴影的光源对象
    spotLight.castShadow = true;
    // 设置计算阴影的区域，注意包裹对象的周围
    spotLight.shadow.camera.near = 1;
    spotLight.shadow.camera.far = 300;
    spotLight.shadow.camera.fov = 20;
    var spotLightHelper = new THREE.SpotLightHelper(spotLight);
    scene.add(spotLightHelper);

二、光照贴图添加阴影

方向光效果如下：


在创建几何体作为投影面后加载光照贴图，其余和上面设置阴影一样。

Geometry类型几何体
Geometry.faceVertexUvs[0]包含的纹理坐标用于颜色贴图map、法线贴图normalMap等,Geometry.faceVertexUvs[1]包含的第二套纹理贴图用于光照阴影贴图
一般通过Threejs几何体API创建的几何体默认只有一组纹理坐标Geometry.faceVertexUvs[0]，所以为了设置光照阴影贴图，需要给另一组纹理坐标赋值Geometry.faceVertexUvs[1] = Geometry.faceVertexUvs[0];

//创建一个平面几何体作为投影面
    var planeGeometry = new THREE.PlaneGeometry(300, 200);

    planeGeometry.faceVertexUvs[1] = planeGeometry.faceVertexUvs[0];
    var textureLoader = new THREE.TextureLoader();
    // 加载光照贴图
    var textureLight = textureLoader.load('cwt.jpg');
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x999999,
        lightMap:textureLight,// 设置光照贴图
        side: THREE.DoubleSide, //两面可见
        // lightMapIntensity:0.5,//烘培光照的强度. 默认 1.
    });
    var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象Mesh
    scene.add(planeMesh); //网格模型添加到场景中

---