title: Threejs pixelated shadows
body: <p>I made an app in which I created shelfs dynamically. All works fine except shadows. The problem is I don't even know what the problem is. Is it the Light or is it the Objects? Hope someone can Help me.
  <a href="https://i.stack.imgur.com/14wkR.png" rel="nofollow noreferrer">here is a picture of my shadows</a></p>
  
  <p>And here my Code for the lights:</p>
  
  <pre><code>addLights(){
  this.ambientLight = new AmbientLight( 0xffffff, 0.8 );
  this.scene.add( this.ambientLight );
  
  this.shadowLight = new THREE.SpotLight( 0xffffff , 0.1 );
  this.shadowLight.position.set( 10 , 100 , 10 );
  
  this.shadowLight.target = this.mainGroup;
  
  this.shadowLight.castShadow = true;
  
  this.shadowLight.shadow.mapSize.width = 4096;
  this.shadowLight.shadow.mapSize.height = 4096;
  
  this.shadowLight.shadow.camera.near = 1;//500;
  this.shadowLight.shadow.camera.far = 1000;//4000;
  this.shadowLight.shadow.camera.fov = 30;
  
  this.shadowLight.shadow.bias = -0.01;
  
  this.scene.add( this.shadowLight );
  
  this.spotLight = new THREE.SpotLight( 0xffffff , 0.8 );
  this.spotLight.position.set( 10 , 100 , 10 );
  this.spotLight.target = this.mainGroup;
  this.spotLight.castShadow = false;
  this.scene.add( this.spotLight );
  </code></pre>
  
  <p>}</p>
  
  <p>And for my white boxes:</p>
  
  <pre><code>makeBox(elemColor: any, coordinates: [ number, number, number ], size: [ number, number, number ] ) {
  // Box
  this.geometry = new BoxBufferGeometry(size[0], size[1], size[2]);
  this.material = new MeshLambertMaterial({ shading:FlatShading , color: elemColor });
  this.mesh = new Mesh(this.geometry, this.material);
  this.mesh.material.side = DoubleSide;
  this.mesh.position.x = coordinates[0];
  this.mesh.position.y = coordinates[1];
  this.mesh.position.z = coordinates[2];
  this.mesh.receiveShadow = true;
  this.mesh.castShadow = true;
  return(this.mesh);
  </code></pre>
  
  <p>}</p>
  
  <p>All the other parts a Imported JSON Objects which i imported with the ObjectLoader. Created with Cheetah,Blender and/or Clara.io and exported as ThreeJS.json</p>
  
  <p>I hope thats enough code, tell me if you need more</p>
  
  <p>thanks for looking :)</p>
  
  <p>EDIT //
  my renderer:</p>
  
  <pre><code>// RENDERER
  this.renderer = new WebGLRenderer( { antialias: true } );
  this.renderer.shadowMapType = THREE.PCFSoftShadowMap; // softer shadows
  //this.renderer.physicallyCorrectLights = true;
  this.renderer.setClearColor( this.scene.fog.color );
  this.renderer.setPixelRatio( window.devicePixelRatio );
  this.renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild( this.renderer.domElement );
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.renderReverseSided = true;
  </code></pre>