在three.js平面中将png转换为高度答案

【问题标题】：convert png into height in three.js plane在three.js平面中将png转换为高度
【发布时间】：2019-07-22 22:44:29
【问题描述】：

我在 three.js 中可视化这张图片 https://i.imgur.com/HOwXADD.png 使用平面几何，我想为与该图像对应的平面添加高度 https://i.imgur.com/UBmdWMc.png （白色区域的高度更大）

我怎样才能做到这一点？

这是我目前简单的three.js代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vis</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
      }
      canvas {
        display: block;
      }
     </style>
</head>

<body>
    <script src="lib/three.js"></script>
    <script src="lib/OrbitControls.js"></script>
    <script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.PlaneGeometry(15, 12);
var loader = new THREE.TextureLoader();
var material = new THREE.MeshLambertMaterial({
    map: loader.load('https://i.imgur.com/hHZICLa.jpg', render),
    side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render); // call this only in static scenes (i.e., if there is no animation loop)
controls.minDistance = 5;
controls.maxDistance = 50;
controls.minPolarAngle = 0.05;
controls.maxPolarAngle = Math.PI / 1.01;
controls.minAzimuthAngle = -Math.PI / 2.02;
controls.maxAzimuthAngle = Math.PI / 2.02;

function render() {
    renderer.render(scene, camera);
}
</script>

我想我应该向geometry 添加片段，但当前图像和高度图的尺寸为 1500 x 1200，并且使用new THREE.PlaneGeometry(15, 12, 1500, 1200); 创建平面需要大量内存并导致浏览器崩溃。

我认为我应该将高度图读取为像素，并在这样的循环中应用它们的值

for (var i = 0; i <  i < mesh.geometry.vertices.length; i++) {
    mesh.geometry.vertices[i].z = pixelvalue;
}

但我不知道如何将像素值加载为高度以及如何使其与图像的完全相同的像素或顶点相对应。

感谢您的阅读

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您可以使用displacementMap 在顶点着色器中执行这种类型的顶点置换。您只需切换到MeshPhongMaterial 即可使用这种纹理。

材质属性displacementScale 和displacementBias 允许您根据需要调整效果。

【讨论】：