three.js实现阴影、投影效果

效果：

基本思路

//一定要加上这两行，不然无法显示阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
//创建网格物体
//将网格物体设置为产生阴影的物体

//创建一个平面
//调整平面角度、配置
//将平面设置为接受阴影的平面

//创建一个方向光
//调整光源方向位置、目标物体、角度（对于聚光灯来说需要调节角度）
//将光设置为用于计算阴影的光源

//计算阴影的区域：最近、最远、最左、最右、最上、最下；如果是聚光灯则只需：最近、最远、fov

具体实现

 	//创建网格物体
        var geometry = new THREE.BoxGeometry(100,100,100);
        var material = new THREE.MeshLambertMaterial({color:0x0000ff});
        var mesh = new THREE.Mesh(geometry,material);
        mesh.position.y+=1;
        //将网格物体设置为产生阴影的物体
        mesh.castShadow = true;
        scene.add(mesh);


        //创建第一个平面
        var geometry2 = new THREE.PlaneGeometry(400,300);
        var material2 = new THREE.MeshLambertMaterial({color:0xffffff});
        var plant = new THREE.Mesh(geometry2,material2);
        //调整平面角度、位置
        plant.rotateX(-Math.PI / 2);
        plant.position.y = -200;
        //将平面设置为接受阴影的平面
        plant.receiveShadow = true;
        scene.add(plant);

        //创建一个方向光
        var light = new THREE.DirectionalLight(0xffffff,1.0);
        //调整光源方向位置、目标物体、角度（对于聚光灯来说需要调节角度）
        light.position.set(0,50,0);
        // light.target = mesh;
        //将光设置为用于计算阴影的光源
        light.castShadow = true;
        //计算阴影的区域：最近、最远、最左、最右、最上、最下；如果是聚光灯则只需：最近、最远、fov
        light.shadow.camera.near = 0.5;
        light.shadow.camera.far = 300;
        light.shadow.camera.left = -50;
        light.shadow.camera.right = 200;
        light.shadow.camera.top = 200;
        light.shadow.camera.bottom = -100;
        scene.add(light);



        //创建第二个平面
        var geometry3 = new THREE.PlaneGeometry(400,300);
        var material3 = new THREE.MeshLambertMaterial({color:0xffffff});
        var plant3 = new THREE.Mesh(geometry3,material3);
        //调整平面角度、位置
        //plant3.rotateX(-Math.PI / 4);
        plant3.position.z = -200;
        //将平面设置为接受阴影的平面
        plant3.receiveShadow = true;
        scene.add(plant3);

        //创建一个方向光
        var light2 = new THREE.DirectionalLight(0xffffff,1);
        //调整光源方向位置、目标物体、角度（对于聚光灯来说需要调节角度）
        light2.position.set(10,-10,40);
        // light.target = mesh;
        //将光设置为用于计算阴影的光源
        light2.castShadow = true;
        //计算阴影的区域：最近、最远、最左、最右、最上、最下；如果是聚光灯则只需：最近、最远、fov
        light2.shadow.camera.near = 0.5;
        light2.shadow.camera.far = 300;
        light2.shadow.camera.left = -50;
        light2.shadow.camera.right = 200;
        light2.shadow.camera.top = 200;
        light2.shadow.camera.bottom = -100;

        scene.add(light2);