Блог

Работаю над какой-то вымышленной картой сокровищ. Я разрезаю большую карту смещения на меньшие плитки, поскольку я еще не знаю, насколько широким будет конечный ландшафт — сейчас это 5 * 5, но в будущем он может быть шире

По некоторым причинам у меня возникают проблемы с проецированием теней на смещенные плоскости. Я не знаю, откуда берется проблема. Возможно, это способ, которым я помещаю сетки в массив с помощью функции, боюсь, я делаю это неправильно.

Я хотел бы добиться результата, используя направленный свет

Вот черновик c4d того, чего я пытаюсь достичь

и вот что я могу сделать в браузере (пока не удалось правильно их разметить: ^)

 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 );

  

Редактировать: вот более чистая версия без массива, поскольку это не часть проблемы
jsfiddle.net/clemtre/3y9tqc6j/34

 
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();

  

Большое спасибо!