shadowProblem.js

import React, { Component } from 'react';
import React3 from 'react-three-renderer';
import THREE from 'three';
import { connect } from 'react-redux';

import {
	rotate as rotateAction,
} from '../actions/ui';

const quarterRotation = Math.PI / 2;
const floorRotation = new THREE.Euler(-quarterRotation, 0, 0);
const d = 20;

class App extends Component {
	constructor(props, context) {
		super(props, context);
		const { rotate } = props;

		this.cameraPosition = new THREE.Vector3(5, 5, 5);
		this.worldPosition = new THREE.Vector3(0, 0, 0);

		const d = 20;

		this.lightPosition = new THREE.Vector3(0, 5, 5);
		this.lightTarget = new THREE.Vector3(0, 0, 0);

		this.boxPosition = new THREE.Vector3(0, 2, 2);

		this.onAnimate = () => {
			rotate();
		};
	}

	render() {
		const width = window.innerWidth;
		const height = window.innerHeight;
		const {
			ui: { rotation, cubeWidth, cubeHeight },
			rotate,
			increment,
			decrement
		} = this.props;

		return (
      <React3
        mainCamera="camera"
        width={width}
        height={height}
        onAnimate={this.onAnimate}
        alpha
        antialias
        gammaInput
        gammaOutput
        shadowMapEnabled
      >
        <scene>
          <orthographicCamera
            name="camera"
            ref="camera"

            left={width / -200}
            right={width / 200}
            top={height / 200}
            bottom={height / -200}
            near={0.5}
            far={500}

            position={this.cameraPosition}
            lookAt={this.worldPosition}
          />

          <mesh
            position={this.lightPosition}
          >
            <boxGeometry
              width={0.1}
              height={0.1}
              depth={0.1}
            />
            <meshLambertMaterial
              color={0x000000}
            />
          </mesh>

          <ambientLight
            color={0x666666}
          />
          <directionalLight
            color={0xffffff}
            intensity={1.75}

            castShadow

            shadowMapWidth={1024}
            shadowMapHeight={1024}

            shadowCameraLeft={-d}
            shadowCameraRight={d}
            shadowCameraTop={d}
            shadowCameraBottom={-d}

            shadowCameraFar={3 * d}
            shadowCameraNear={d}

            position={this.lightPosition}
            lookAt={this.lightTarget}
          />

          <mesh
            rotation={rotation}
            position={this.boxPosition}
            castShadow
            receiveShadow
          >
            <boxGeometry
              width={cubeWidth}
              height={cubeHeight}
              depth={1}
            />
            <meshLambertMaterial
              color={0xFA6ACC}
            />
          </mesh>

          <group>
            {
              // wall geometry
            }
            <mesh
              castShadow
              receiveShadow
            >
              <planeGeometry
                width={5}
                height={5}
              />
              <meshLambertMaterial
                color={0xFADA00}
              />
            </mesh>

            {
              // ground geometry
            }
            <mesh
              rotation={floorRotation}
              castShadow
              receiveShadow
            >
              <planeGeometry
                width={5}
                height={5}
              />
              <meshLambertMaterial
                color={0x00DAFA}
              />
            </mesh>
          </group>
        </scene>
      </React3>
		);
	}
}

export default connect(
	state => state,
	{ rotate: rotateAction },
)(App);