Stackoverflow Question

http://stackoverflow.com/questions/38342266/shadowmap-cant-detect-all-instances-on-three-instancedbuffergeometry

by Andre Venancio

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec3 offset; void main() { gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position + offset, 1.0); }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    void main() { gl_FragColor = vec4(1.0); }
</script>

CSS

html,
body {
    margin: 0;
}

JavaScript

var scene, camera, renderer, controls;
var offsets;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 250, 1000);

    renderer = new THREE.WebGLRenderer();
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    renderer.gammaInput = true
    renderer.gammaOutput = true
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // Lights
    var ambient = new THREE.AmbientLight(0xcccccc);
    scene.add(ambient);

    var spot = new THREE.SpotLight(0x999999, 1, 0, Math.PI / 2, 1);
    spot.position.set(700, 700, 700)
    spot.target.position.set(0, 0, 0);
    spot.castShadow = true
    spot.angle = Math.PI / 4
    spot.penumbra = 0.05
    spot.decay = 2
    spot.distance = 10000
    spot.shadow.mapSize.width = 1024
    spot.shadow.mapSize.height = 1024
    spot.shadow.camera.near = 1
    spot.shadow.camera.far = 10000
    scene.add(spot);

    var spotHelper = new THREE.SpotLightHelper(spot)
    scene.add(spotHelper);

    // Floor
    var geometry = new THREE.PlaneGeometry(3000, 3000, 10, 10);
    var material = new THREE.MeshPhongMaterial({
        color: new THREE.Color(0x777777),
        shininess: 5
    });

    var ground = new THREE.Mesh(geometry, material);
    ground.rotation.x = -1.57;
    ground.receiveShadow = true;
    scene.add(ground);

    // instanced geometry
    var instances = 10;
    var geometry = new THREE.InstancedBufferGeometry();
    var icosahedron = new THREE.BufferGeometry().fromGeometry(new THREE.IcosahedronGeometry(200, 3));

    geometry.addAttribute('position', icosahedron.attributes.position);
    geometry.addAttribute('normal', icosahedron.attributes.normal);
    geometry.addAttribute('uv', icosahedron.attributes.uv);
   ...