I've been experimenting with sampling from a heightmap to determine the z-coordinate of various points in my scene, but it seems like I'm making a fundamental error somewhere. Let me walk you through what I have so far:
// Creating the Scene
var scene = new THREE.Scene();
// Setting up the Camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.001, 10);
// Initializing the Renderer
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Adding Ambient Light
var ambientLight = new THREE.AmbientLight(0xeeeeee);
scene.add(ambientLight);
// Implementing Controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.zoomSpeed = 0.4;
controls.panSpeed = 0.2;
// Rendering Loop
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
};
/**
* Obtaining Heightmap Data
**/
function getHeightmap(cb) {
// Code for fetching and processing heightmap data
}
/**
* Generating Geometry
**/
function addLetters(data) {
// Code for positioning points based on heightmap data
}
/**
* Helper Functions
**/
// Fetch heightmap data and initiate rendering
getHeightmap(function(data) {
addLetters(data);
render();
})html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
overflow: hidden;
background: linear-gradient(#585852, #262726);
}
#letter-canvas {
position: absolute;
top: 0;
left: 0;
}<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script>
<script src='https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/trackball-controls.min.js'></script>
// Shader code goes here...
While attempting to set the z-position of each point using the heightmap data, I noticed irregularities in the z-coordinates that don't align with the heightmap itself. It's clear that my sampling method is flawed, but I can't seem to pinpoint the exact issue.
If anyone has any suggestions or insights on where things might be going wrong, I would greatly appreciate your input!