给ar中的3d模型加阴影

1.renderer设置

首先我们需要告诉renderer我们需要显示阴影效果：

//告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;

2、光源设置

其次需要设置正确的光源，光影，有光才有影。现实环境中，人们之所以能看得到物体，是因为有光，物体的材质反射光到人眼中。在ThreeJS中有几种光源，去模拟现实环境。
最常见的四种为：
环境光( AmbientLight )：笼罩在整个空间无处不在的光
点光源( PointLight )：向四面八方发射的单点光源
聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源
平行光( DirectinalLight )：平行的一束光，模拟从很远处照射的太阳光

  // 平行光 
  const light2 = new THREE.DirectionalLight(0xffffff,0.5) 
  light2.position.set(0, 0.2, 0.1)
  light2.castShadow = true;
  scene.add(light2)

  //点光源
  const light = new THREE.PointLight(0xffffff, 1, 100);
  light.position.set(0, 5, 5);
  light.castShadow = true;
  scene.add(light);

3、3d模型设置

需要在每个子网格上设置castShadow = true，如下所示：

var loader = new THREE.GLTFLoader();

loader.load( 'xxx', function( gltf ) {
    //主要代码块
    gltf.scene.traverse( function( node ) {

        if ( node instanceof THREE.Mesh ) { node.castShadow = true; }

    } );

    scene.add( gltf.scene );

} );

4、创建底部平面接收阴影设置

最后，添加一个接收阴影的平面，通过receiveShadow属性设置平面接收阴影。

   //添加平面, 绘制阴影
  var planeGeometry = new THREE.PlaneGeometry(100, 60, 10, 10);
  var planeMaterial = new THREE.ShadowMaterial();
  planeMaterial.opacity = 0.2;
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.y = -2;
  plane.position.z = 0;
  plane.opacity = 0
  scene.add(plane);
  plane.receiveShadow = true;