I have a visualization challenge using three.js. I am working with an image linked here: https://i.sstatic.net/EzfcS.png. I am using a plane geometry and I aim to adjust the height of the plane according to this other image: https://i.sstatic.net/hMj91.png. The white area in the second image indicates a greater height.
Any ideas on how to achieve this?
Below is the current simple three.js code I am working with:
<!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>
I believe adding segments to the geometry could be a solution, but the size of the current image and height map (1500 x 1200) make creating a plane with
new THREE.PlaneGeometry(15, 12, 1500, 1200);I've been considering reading the height map as pixels and assigning their values using a loop like this:
for (var i = 0; i < mesh.geometry.vertices.length; i++) {
mesh.geometry.vertices[i].z = pixelvalue;
}
However, I'm unsure how to load the pixel value as height and accurately link it to the corresponding pixel or vertex in the image.
Appreciate your insights!