Question

我想对模拟过程中获得的景观进行可视化处理。我拥有的代码：

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较慢，但也会生成一些高度图作为输出。问题是，由于该功能很慢，我无法在很多方面进行仿真。为了具有良好的可视化效果，我只想平滑并提高所计算的粗略高度图的分辨率。

您能给我一些有关如何解决此问题的建议吗？

提高高度图的分辨率以可视化为THREE.js中的表面

0 个答案: