20170127 Terrain Self Shadow

3js

by steveow

HTML

<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>

JavaScript

//...copied from West Langley: http://jsfiddle.net/a7brv8b9/3/

var container, data;
var camera, controls, scene, renderer;
var mesh, texture;
var worldWidth, worldDepth,
worldHalfWidth, worldHalfDepth;
var heightdata = initData();
container = document.createElement('div');
document.body.appendChild(container);
var clock = new THREE.Clock();

if (!Detector.webgl) {
    Detector.addGetWebGLMessage();
    document.getElementById('container').innerHTML = "";
}

init();
animate();

function init() {
    worldWidth = heightdata.width;
    worldDepth = heightdata.height;
    worldHalfWidth = Math.floor(worldWidth / 2);
    worldHalfDepth = Math.floor(worldDepth / 2);
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
    scene = new THREE.Scene();
    data = heightdata.arr;
    var sizeScale = 5;
    var heightScale = 2;
    camera.position.set(500, data[worldHalfWidth + worldHalfDepth * worldWidth] * heightScale + 150, -500);
    var geometry = new THREE.PlaneGeometry(worldWidth * sizeScale, worldDepth * sizeScale, worldWidth - 1, worldDepth - 1);
    geometry.rotateX(-Math.PI / 2);
    //geometry.receiveShadow = true; -- removed
    var vertices = geometry.vertices;
    for (var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
        vertices[i].y = data[i] * heightScale;
    }

    geometry.computeFaceNormals(); // ------------- added
    geometry.computeVertexNormals(); // -------------- added

    //                texture = new THREE.CanvasTexture(generateTexture(data, worldWidth*sizeScale, worldDepth*sizeScale));
    //                texture.wrapS = THREE.ClampToEdgeWrapping;
    //                texture.wrapT = THREE.ClampToEdgeWrapping;
    mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
        color: 0xFF0000
    })); //{map: texture}));
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add(mesh);
    var sphere = new THREE.Mesh(
    new THREE.SphereGeometry(
    10,
   ...