three.jsで影をつけてみる

![9e0525d580d7c8e78baf49eebb6291c5.gif](https://qiita-image-store.s3.amazonaws.com/0/108368/de70c091-5ba0-6a2c-1bcc-c59bb2b3547a.gif)

影つけてみました。
影つけるのめんどくさい。
Unityに感謝

参考

http://qiita.com/edo_m18/items/44b4292e2970912eafa3


```html:qiita.html

<html>
  <head>
  <title>My first Three.js app</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
  </head>
  <body>
    <script src="../build/three.js"></script>
<script>

var renderer;
var scean;
var camera;
var planes;
var plane;
var light;

var scean;

var boxs;


Init();

function Init(){

    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(100, 200, 700);

    scene = new THREE.Scene();

    light = new THREE.DirectionalLight(0x999999);
    light.position.set(100, 500, 500);
    light.intensity = 5;

    light.shadow.camera.near = 0;
    light.shadow.camera.far = 1000;
    light.shadow.camera.top = 1000;
    light.shadow.camera.bottom = -100;
    light.shadow.camera.left = 200;
    light.shadow.camera.right = -200;
    light.shadow.mapSize.width = 1000;
    light.shadow.mapSize.height = 1000; 
   // scene.add(new THREE.CameraHelper(light.shadow.camera));
    boxs = new Array(100);


for(var i =0; i< 100; i++){
      const color = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});

    var box = new THREE.Mesh(
        new THREE.BoxGeometry(1,10,10),      
        new THREE.MeshPhongMaterial( {  color: color,   metalness: 0, roughness: 1

    } )
    );
    box.position.x=100*Math.sin(i);
    box.position.y=-150
    box.position.z=100*Math.cos(i);
    box.castShadow = true;
    boxs[i]= box;

        scene.add(boxs[i]);


  }

    var plane = new THREE.Mesh(
        new THREE.PlaneGeometry(10000, 1000, 10, 10),
        new THREE.MeshPhongMaterial( {  color: 0xfffffFF, specular: 0x666666,emissive: 0x222200,    metalness: 0, roughness: 1

} )
    );
    plane.position.y = -150;
    plane.rotation.x = -Math.PI / 2;

    scene.add(light);
    scene.add(box);
    scene.add(plane);
    camera.lookAt(new THREE.Vector3(-100,0,0));



    light.castShadow = true;



    plane.receiveShadow = true;


    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.shadowMapEnabled = true;

    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.render(scene, camera);

};



var n =0;
var m = 0;
const render = function () {
  n+= 0.001;

  requestAnimationFrame( render );
  light.position.set(50*Math.cos(n*10), 100, 50*Math.sin(n*10));

  for(var i =1; i< boxs.length; i++){
    m= 0.05*i;
   boxs[i].rotation.y += 0.001*i;
    
    boxs[i].position.x = (100-boxs[i].position.y)*Math.sin(i)-100;

    boxs[i].position.z = (100-boxs[i].position.y)*Math.cos(i)-100;


    if(boxs[i].position.y>100){

          boxs[i].position.y = -150;

    }else{
          boxs[i].position.y += m

    }

  }

  renderer.render(scene, camera);
};

render();

</script>

  </body>
  </body>
</html>

```


ライトは、キャストシャドウをtrueにしたり、ライトを受けるところはreciveShadowをtrueにする必要があったりで大変でした。

あと、lighthelperみたいなのあったんだけど、それを使って、綺麗な影を作る必要があるみたい。

結構大変でした。