使用three.js添加阴影为什么设置了阴影相关设置后平面和立方体都消失了

Question

设置了spotLight.castShadow = true;之后所有东西都消失了，而且设置的spotLight.shadowCameraVisible = true;也没有效果。

function init(){
   
$("#mainCanvas").attr("width", $(window).get(0).innerWidth);
$("#mainCanvas").attr("height", $(window).get(0).innerHeight);

    
    //渲染器
    var renderer = new THREE.WebGLRenderer({             
            canvas: document.getElementById('mainCanvas')
    });
    renderer.setClearColor(0xD3D9D9);
    renderer.shadowMapEnabled = true;
    
    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    camera.position.set(4,4,5);
    camera.lookAt(new THREE.Vector3(0,0,0));
    scene.add(camera);
    
    var stat = null;
    stat = new Stats();
    stat.domElement.style.position = 'absolute';
    stat.domElement.style.left = '0px';
    stat.domElement.style.top = '0px';
    document.body.appendChild(stat.domElement);
    
    //轨迹球相机控件
    var trackballControls = new THREE.TrackballControls(camera);
        trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.0;
        trackballControls.panSpeed = 1.0;
    function render(){
        stat.begin();
        var clock = new THREE.Clock();
        var delta = clock.getDelta();
        trackballControls.update(delta);
        requestAnimationFrame(render);
        renderer.render(scene,camera);
        stat.end();
    }
    render()
    
    //添加地面
    var ground = new THREE.Mesh(new THREE.PlaneGeometry(10,10,10,10),new THREE.MeshLambertMaterial({
        color:0xA7A7A7,
    }))
    ground.rotation.x = -0.5*Math.PI;
    var groundLine = new THREE.Mesh(new THREE.PlaneGeometry(10,10,20,20),new THREE.MeshLambertMaterial({
        color:0x000000,
        side:THREE.DoubleSide,
        wireframe:true
    }))
    groundLine.rotation.x = -0.5*Math.PI;
    scene.add(ground);
    scene.add(groundLine);
    ground.receiveShadow = true;
    
    
    //光线
    var ambientLight = new THREE.AmbientLight('#0c0c0c');
    ambientLight.intensity = 0.1
    var spotLight = new THREE.SpotLight(new THREE.Color('#EEDA09'));
    
    spotLight.position.set(-10,10,10);
    var target = new THREE.Object3D();
    target.position = new THREE.Vector3(0,0,0);
    spotLight.target = target;
    scene.add(target);
    spotLight.target = target;
    spotLight.visible = true;
    
    
    spotLight.castShadow = true;
    
    
    spotLight.angle = Math.PI/10;
    spotLight.exponent = 30;
    spotLight.shadowMapHeight = 5;
    spotLight.shadowCameraVisible = true;
    scene.add(spotLight);
    scene.add(ambientLight)
    
    
    
    
    var car = new THREE.Object3D();
    
    var cube = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),new THREE.MeshLambertMaterial({
        color:0x00ff00,
    }));
    cube.castShadow = true;
    car.add(cube);
    
    scene.add(car);
    
    
    renderer.render(scene,camera)
    
     
    
}

Answer 1

等待大神答复