Three.js 受置换贴图影响的自阴影平面不工作

正在制作某种虚构的藏宝图。我正在将一张大位移地图切割成更小的瓷砖，因为我还不知道最终的地形会有多宽——现在是5*5，但将来可能会更宽

由于某些原因，我在将阴影投射到移位的平面上时遇到问题。 我不知道问题出在哪里。也许这是我通过函数将网格推入数组的方式，我恐怕这样做不对

我想用平行光来达到这个效果

---

非常感谢

你能添加一个工作演示吗？可以通过jsfiddle，也可以通过jsfiddle？这里是：您可以添加一个工作演示吗？可以通过JSFIDLE或？这里是：

var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

var material = [];
var texture = [];
var tile = [];

var planeRes = 128;
var planesize = 1;

var dim = 5;
var size = dim * dim;

var DispScale = 2;

var geometry = new THREE.PlaneBufferGeometry(planesize,planesize,planeRes, planeRes);


function tileGenerator(inc) {
  if (inc < 10) {
    texture[inc] = new THREE.TextureLoader().load('cut25lowres/image_part_00' + inc + '.jpg');
  } else {
    texture[inc] = new THREE.TextureLoader().load('cut25lowres/image_part_0' + inc + '.jpg');
  }
  material[inc] = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    displacementMap: texture[inc],
    side: THREE.DoubleSide,
    receiveShadow : true,
    castShadow : true
  });
  tile[inc] = new THREE.Mesh(geometry, material[inc]);
}

for (var i = 1; i < size + 1; i++) {
  tileGenerator(i);
}


for (var i = 1; i < size + 1; i++) {
  tile[i].position.set(-planesize * (i % dim)+1, 0, -planesize * Math.ceil(i / dim)+1 );
  tile[i].rotation.x = Math.PI / 2 + Math.PI;
  tile[i].rotation.z = Math.PI / 2;

  scene.add(tile[i]);
}

var dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.castShadow = true;

dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 6;
dirLight.shadow.mapSize.set( 1024, 1024 );
var targetObject = new THREE.Object3D();
targetObject.position.x = -10;
targetObject.position.z = -10;

dirLight.position.y = 3;

scene.add(targetObject);

dirLight.target = targetObject;
scene.add( dirLight );

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var scene = new THREE.Scene();

var heightmap = new THREE.TextureLoader().load('https://i.imgur.com/MVYhfd7.jpeg');
var geometry = new THREE.PlaneGeometry(20, 20, 100, 100);
var material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  displacementMap: heightmap,
  displacementScale: 10
});


var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 1, 1).normalize();
light.castShadow = true;
scene.add(light);

var plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI/2;
scene.add(plane);

camera.position.z = -20;
camera.position.y = 5;
controls.update();

var animate = function() {
  requestAnimationFrame(animate);

  controls.update();

  renderer.render(scene, camera);
};

animate();