Увеличьте разрешение карты высот, чтобы визуализировать как поверхность в THREE.js - PullRequest
Новая
       27

Увеличьте разрешение карты высот, чтобы визуализировать как поверхность в THREE.js

0 голосов
/ 30 мая 2019

Я хочу сделать визуализацию ландшафта, полученную во время симуляции.Код, который у меня есть: 

var scene = new THREE.Scene();
var W = window.innerWidth;
var H = window.innerHeight;
var T = 0;
var heightMap;
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setSize(W, H);

var camera = new THREE.PerspectiveCamera(60, W / H, 0.1, 10000);

var planeGeometry = new THREE.PlaneGeometry(80, 80, 10, 10);
var planeMaterial = new THREE.MeshLambertMaterial({
  'wireframe': true
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.rotation.x = -0.4 * Math.PI;
plane.position.set(0, 0, 0);
scene.add(plane);

camera.position.set(0, 50, 100);
camera.lookAt(scene.position);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-30, 600, 600);
scene.add(spotLight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);



drawFrame()

function drawFrame() {
  window.requestAnimationFrame(drawFrame);
  var vLength = plane.geometry.vertices.length;
  heightMap = simulate(T);
  for (var i = 0; i < vLength; i++) {
    plane.geometry.vertices[i].z = heightMap.flat()[i]
  }
  plane.geometry.verticesNeedUpdate = true;
  renderer.render(scene, camera);
  T += 0.01;
}

function simulate(T) {
  var HM = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 2, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 2, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  ];

  for (var i = 0; i < 11; i++) {
    for (var j = 0; j < 11; j++) {
      HM[i][j] = Math.sin(T) * HM[i][j] * 20;
    }
  }

  return HM
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>

Реальная функция simulate медленная, но также выдает некоторую карту высот в качестве вывода.Проблема в том, что я не мог симулировать во многих точках, так как эта функция медленная.Чтобы иметь хорошую визуализацию, я хочу просто сгладить и увеличить разрешение вычисленной грубой карты высот.

Не могли бы вы дать мне совет о том, как решить эту проблему?

...