用three做demo,阴影有问题

图片说明
源代码如下:
$(function(){
var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer({antialias:true});

        renderer.setClearColor(0xEEEEEE,1.0);
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMap.enabled = true;
        var axes = new THREE.AxesHelper(20);
        scene.add(axes);

        //creat plane
        var planeGeometry = new THREE.PlaneGeometry(60,20);
        var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x = -0.5*Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;
        plane.receiveShadow = true;

        scene.add(plane);
        // creat cube
        var cubeGeometry = new THREE.CubeGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000,wireframe:true})
        var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;
        cube.castShadow = true;

        scene.add(cube);
        //creat sphere
        var sphereGeometry = new THREE.SphereGeometry(4,4,4);
        var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff,wireframe:true})
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;
        sphere.castShadow = true;

        scene.add(sphere);

        //add light
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add camera
        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        $("#WebGL-output").append(renderer.domElement);
        renderer.render(scene,camera);
    })

可以尝试打开抗锯齿
renderer.antialias = true;

试一下增加光源阴影贴图的设置语句

directional.shadowMapWidth = 1024 * 15;
directional.shadowMapHeight = 1024 * 15;

具体对象名和变量值,这自己改

你的是点光源。阴影都是马赛克,可以试一下开启

renderer.shadowMapType=THREE.PCFSoftShadowMap;

可有效减少马赛克,但是没有平行光的阴影效果好。