Three.js内置了多种光源可以直接调用:

AmbientLight(环境光)
AreaLight(区域光)
DirectionalLight(平行光)
HemisphereLight(半球光)
PointLight(点光源)
SpotLight(聚光灯)

首先我们设置好基础的环境:

我的第一个WebGL程序

   现在运行页面,我们只能看到蓝色的背景和一块黑色的几何体,因为我们还没有加入灯光,所以一切的物体都是黑色的。立方体和地面的材质均为MeshLambertMaterial(类似纸张,可以均匀反射接收到的光线)。

1.jpg

AmbientLight(环境光)

   环境光是一种无处不在的光,就好像现实世界中的空气。环境光的光线来自任何方向,因此,当你仅为场景指定环境光时,所有的物体无论向量如何,都将表现为同样的明暗程度。
环境光的构造函数THREE.AmbientLight只有一个参数——16进制的颜色值。

AmbientLight( hex )
var light = new THREE.AmbientLight(0xff0000);
scene.add( light );

给场景添加红色的环境光后,立方体和地面都显示为红色:

2.jpg

DirectionalLight(平行光)

   平行光是一组具有方向的没有衰减的平行光线,它类似太阳光:虽然遥远但打在物体上的光都来自同一个方向。
环境光的构造函数THREE.DirectionalLight有两个参数——16进制的颜色值和光线的强度(默认为1)。
DirectionalLight(hex, intensity)
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(100, 150, 50);
scene.add(light);
我们在右上方定义了一个强度为50%的平行光,方向为右上角到原点,所以立方体和地面都暗暗的显示出了原本的颜色。

3.jpg

PointLight(点光源)

   点光源的光线来自同一点,并向外发射。就好像蜡烛发出的光和萤火虫发出的光。
点光源的构造函数THREE. PointLight有三个参数,比平行光多了一个距离参数,光会从光源经过distance的距离一路衰减为0。
PointLight(hex, intensity, distance)
var light = new THREE.PointLight(0xffffff, 1, 300);
light.position.set(50, 50, 50);
scene.add(light);
以上是几个比较常用的光源,看过4个示例后,有没有发现有点不对劲?怎么没有阴影?

4.jpg

投影

   Three.js的光源默认不会导致物体间的投影,打开投影需要执行以下几步:
打开渲染器的地图阴影: renderer.shadowMapEnabled = true;
启用光线的投影:light.castShadow = true;
把模型设置为生成投影:mesh.castShadow = true;
把模型设置为接收阴影:mesh.receiveShadow= true;

5.jpg

完整的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个WebGL程序</title>
    <style>body { margin: 0; overflow: hidden; }; canvas { width: 100%;  height: 100%; }</style>
</head>
<body>
    <script src="three.min.js"></script>
    <script>
    //创建场景
        var scene = new THREE.Scene();
    //创建摄影机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(300, 300, 300);
    //创建绿色立方体
        var box = new THREE.Mesh(
        new THREE.CubeGeometry(5, 5, 40),
        new THREE.MeshLambertMaterial({
                color: 0x00ff00
            }));
        box.position.set(0, 15, 0);
    box.castShadow = true;
        scene.add(box);
    //创建红色地面
        var ground = new THREE.Mesh(
        new THREE.CubeGeometry(200, 1, 200),
        new THREE.MeshLambertMaterial({
                color: 0xff0000,
            }));
        ground.receiveShadow = true;
        scene.add(ground);
    //创建渲染器并把设置背景为蓝色
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x0000ff);
    renderer.shadowMapEnabled = true;
        document.body.appendChild(renderer.domElement);
    //添加聚光灯
    var light = new THREE.SpotLight( 0xffffff, 3 );
    light.position.set( 100, 200, 50 );
    light.castShadow = true;        
    light.shadowCameraNear = 50;
    light.shadowCameraFar = 300;
    light.shadowCameraFov = 30;
    scene.add( light );

    //渲染画面
    var render = function() {
        requestAnimationFrame(render);
        box.rotation.y += 0.01;
        ground.rotation.y += 0.01;
    camera.lookAt(scene.position);
        renderer.render(scene, camera);
        };
        render();
    </script>
</body>
</html>