Three.js 缺少 shadowCamera

Question

我目前正在学习 Three.js 并且我正在尝试这个演示：

function init(){
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, .1, 500);
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(0xdddddd);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMapEnabled = true;
  renderer.shadowMapSoft = true;

  //Enable orbit controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', render);

  var axis = new THREE.AxisHelper(10);
  scene.add(axis);

  var grid = new THREE.GridHelper(50, 5);
  var color = new THREE.Color("rgb(255,0,0)");
  grid.setColors(color, 0x000000);
  scene.add(grid);

  var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
  var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff3300});
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

  cube.position.x = 2.5;
  cube.position.y = 4;
  cube.position.z = 2.5;
  cube.castShadow = true;
  scene.add(cube);

  camera.position.x = 40;
  camera.position.y = 40;
  camera.position.z = 40;

  camera.lookAt(scene.position);

  var planeGeometry = new THREE.PlaneGeometry(30, 30, 30);
  var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);

  plane.rotation.x = -.5*Math.PI;
  plane.recieveShadow = true;
  scene.add(plane);

  var guiControls = new function(){
    this.rotationX = 0.01;
    this.rotationY = 0.01;
    this.rotationZ = 0.01;

    this.lightX = 20;
    this.lightY = 35;
    this.lightZ = 40;
    this.intensity = 1;
    this.distance = 0;
    this.angle = 1.570;
    this.exponent = 0;
    this.shadowCameraNear = 10;
    this.shadowCameraFar = 100;
    this.shadowCameraFov = 50;
    this.shadowCameraVisible = true;
    this.shadowMapWidht = 1028;
    this.shadowMapHeight = 1020;
    this.shadowBias = 0.01;
    this.shadowDarkness = 0.5;
  }

  var spotlight = new THREE.SpotLight(0xffffff);
  spotlight.castShadow = true;
  spotlight.position.set(20, 35, 40);
  spotlight.intensity = guiControls.intensity;
  spotlight.distance = guiControls.distance;
  spotlight.angle = guiControls.angle;
  spotlight.exponent = guiControls.exponent;
  spotlight.shadowCameraNear = guiControls.shadowCameraNear;
  spotlight.shadowCameraFar = guiControls.shadowCameraFar;
  spotlight.shadowCameraFov = guiControls.shadowCameraFov;
  spotlight.shadowCameraVisible = guiControls.shadowCameraVisible;
  spotlight.shadowBias = guiControls.shadowBias;
  spotlight.shadowDarkness = guiControls.shadowDarkness;

  scene.add(spotlight);

  var datGUI = new dat.GUI();
  datGUI.add(guiControls, 'rotationX', 0, 1);
  datGUI.add(guiControls, 'rotationY', 0, 1);
  datGUI.add(guiControls, 'rotationZ', 0, 1);
  datGUI.add(guiControls, 'lightX', -60, 180);
  datGUI.add(guiControls, 'lightY', 0, 180);
  datGUI.add(guiControls, 'lightZ', -60, 180);

  datGUI.add(guiControls, 'intensity', 0.01, 5).onChange(function(value){
    spotlight.intensity = value;
  });
  datGUI.add(guiControls, 'distance', 0, 1000).onChange(function(value){
    spotlight.distance = value;
  });
  datGUI.add(guiControls, 'angle', 0.001, 1.570).onChange(function(value){
    spotlight.angle = value;
  });
  datGUI.add(guiControls, 'exponent', 0, 50).onChange(function(value){
    spotlight.exponent = value;
  });
  datGUI.add(guiControls, 'shadowCameraNear', 0, 100).name('Near').onChange(function(value){
    spotlight.shadowCameraNear = value;
    spotlight.shadowCamera.updateProjectionMatrix();
  });
  datGUI.add(guiControls, 'shadowCameraFar', 0, 5000).name('Far').onChange(function(value){
    spotlight.shadowcameraFar = value;
    spotlight.shadowCamera.updateProjectionMatrix();
  });
  datGUI.add(guiControls, 'shadowCameraFov', 0, 180).name('Fov').onChange(function(value){
    spotlight.shadowcameraFov = value;
    spotlight.shadowCamera.updateProjectionMatrix();
  });
  datGUI.add(guiControls, 'shadowCameraVisible').onChange(function(value){
    spotlight.shadowcameraVisible = value;
    spotlight.shadowCamera.updateProjectionMatrix();
  });
  datGUI.add(guiControls, 'shadowBias', 0, 1).onChange(function(value){
    spotlight.shadowBias = value;
    spotlight.shadowCamera.updateProjectionMatrix();
  });
  datGUI.add(guiControls, 'shadowDarkness', 0, 1).onChange(function(value){
    spotlight.shadowDarkness = value;
    spotlight.shadowCamera.updateProjectionMatrix();
  });


  var container = document.getElementById("webglcontainer");
  container.appendChild(renderer.domElement );

  //Add stats
  var stats = new Stats();
  stats.domElement.style.position = "absolute";
  stats.domElement.style.left = "0px";
  stats.domElement.style.top = "0px";

  container.appendChild(stats.domElement);

  function render() {
    cube.rotation.x = guiControls.rotationX;
    cube.rotation.y = guiControls.rotationY;
    cube.rotation.z = guiControls.rotationZ;

    spotlight.position.x = guiControls.lightX;
    spotlight.position.y = guiControls.lightY;
    spotlight.position.z = guiControls.lightZ;
  }

  function animate(){
    requestAnimationFrame(animate);
    render();
    stats.update();
    renderer.render(scene, camera);
  }

  animate();
}
init();

问题是我似乎无法让影子相机出现。光是可见的，我可以操纵它，但是立方体没有在它下面的平面上投射任何阴影...

知道我做错了什么吗？

提前致谢！

Answer 1

很高兴这已经为您解决了，但我讨厌解决了未标记为这样的 Whosebug 问题:-)

所以我重新发布解决方案，它只是 plane.receiveShadow = true; 中的一个拼写错误。

看起来代码是基于 this example（拼写正确的地方），可能对了解照明的人感兴趣。

Three.js 缺少 shadowCamera

Three.js missing shadowCamera

javascript

shadow

three.js