Question

我试图让球的阴影出现在地板上，但它似乎无法奏效。这是我的代码，它声明了渲染器，相机，灯光和对象：

var renderer = new THREE.WebGLRenderer({antialias: true}); 
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.shadowMapEnabled = true;
  renderer.shadowMapType = THREE.PCFSoftShadowMap;
  document.body.appendChild( renderer.domElement ); 

  var planegeo = new THREE.PlaneGeometry(100,100);
  var geomaterial = new THREE.MeshLambertMaterial({color: "#EA8E12", side: THREE.DoubleSide});
  var plane = new THREE.Mesh(planegeo, geomaterial);
  plane.rotation.x += 90;
  plane.position.z = -2;
  scene.add(plane);

  var light = new THREE.AmbientLight( "#EA8E12", 101);
  var light2 = new THREE.DirectionalLight("yellow", 100);
  light.position.set(0, 100, 0);
  light2.position.set(0, 100, 0);
  scene.add(light);
  scene.add(light2);


  var sphereParent = new THREE.Object3D();
  var geometry = new THREE.SphereGeometry(1, 100, 100);
  var material = new THREE.MeshPhongMaterial( {color: "yellow", shininess: 100});
  var circle = new THREE.Mesh(geometry, material);
  sphereParent.add(circle);
  sphereParent.position.set(0,3,0);
  scene.add(sphereParent);



  light2.castShadow = true;
  circle.castShadow = true;
  sphereParent.castShadow = true;
  plane.receiveShadow = true;

有谁能告诉我我错过了什么？感谢

Answer 1

这应该让你开始。根据需要修改参数：

light2.castShadow = true;
light2.shadowMapWidth = 1024;
light2.shadowMapHeight = 1024;
light2.shadowMapDarkness = 0.75;
light2.shadowCameraNear = 1;
light2.shadowCameraFar = 1000;
light2.shadowDarkness = 0.75;

/* since you have a directional light */
light2.shadowCameraLeft = -500;
light2.shadowCameraRight = 500;
light2.shadowCameraTop = 500;
light2.shadowCameraBottom = -500;

light2.shadowCameraVisible = true;    /* debugging */

在渲染器方面，这可能会有所帮助：

renderer.shadowMapDebug = true;

三个JS - 投射阴影

1 个答案: