无法在three.js中投射阴影

时间:2016-03-19 19:46:22

标签: javascript three.js render shadow

我在一个平面上有立方体和盒子,用SpotLight照亮,我希望在平面上看到阴影,以防万一:plane.receiveShadow = true,renderer.shadowMapEnabled = true和objects.castShadow = true,但是我没有&#39 ;得到任何阴影。你能检查我的代码并指出错误吗。

  <script src = "three.js"></script>
  <script>
    var scene,camera,light,renderer;
    var material,geometry,mesh;
    var geometryTwo,materialTwo,meshTwo;
    var geometryThree,materialThree,meshThree;

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);


    var axes = new THREE.AxisHelper(20);
    scene.add(axes);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setClearColor(new THREE.Color("grey",1.0));
    renderer.shadowMapEnabled = true;
    document.body.appendChild(renderer.domElement);


    geometry = new THREE.PlaneGeometry(60,20);
    material = new THREE.MeshLambertMaterial({color:"brown"});
    mesh = new THREE.Mesh(geometry,material);
    mesh.rotation.x = -0.5*Math.PI;
    mesh.position.z = 0;
    mesh.position.x = 15;
    mesh.position.y = 0;
    mesh.receiveShadow = true;

    geometryTwo = new THREE.SphereGeometry(4,20,20);
    materialTwo = new THREE.MeshLambertMaterial({color:0x7777ff})
    meshTwo = new THREE.Mesh(geometryTwo,materialTwo);
    meshTwo.position.y=4;
    meshTwo.position.x=20;
    meshTwo.position.z=2;
    meshTwo.castShadow = true;


    geometryThree = new THREE.BoxGeometry(4,4,4);
    materialThree = new THREE.MeshLambertMaterial({color:0x7777ff});
    meshThree = new THREE.Mesh(geometryThree,materialThree);
    meshThree.position.y=3;
    meshThree.position.x=-4;
    meshThree.position.z=-0;
    meshThree.castShadow = true;

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

    camera.position.x=-30; 
    camera.position.y=40;
    camera.position.z=30;
    camera.lookAt(scene.position);

    scene.add(mesh);
    scene.add(meshTwo);
    scene.add(meshThree);
    scene.add(light);


    renderer.render(scene,camera);

  </script>

enter image description here

0 个答案:

没有答案