用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);
    })
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问