Unable to map texture on to height map mesh in three.js

Questions
, ,
1

I’ve been working on putting together a very simple program that will create a height map from an image and apply a texture that image in three.js

After a bit of hacking around I can generate the height map/mesh from an image quite easily but I cannot map a texture to this mesh object. I’m not sure where I’m going wrong although I’m pretty sure it is in the addMesh(); function. This is my first attempt with three.js so it may well be something very obvious.

Looking through the docs I thought it could be a UVmapping issue but if I try to add ‘texture.wrapS...’ beneath the texture loader (as is the case in the examples) I get: 'Cannot set property 'wrapS' of undefined' :frowning:

The error I am thrown is:

THREE.Material: ‘map’ parameter is undefined.

This is what is rendered:

This is what is rendered

This is the code I’m using:

// Define variables
var camera, scene, renderer, geometry, material, mesh;
var img = document.getElementById("landscape-image");
var texture = new THREE.TextureLoader().load( "assets/texture.png" );

// Get the pixels by draw the image onto a canvas. From the canvas get the Pixel (R,G,B,A)
function getTerrainPixelData(){
  var canvas = document.getElementById("canvas");

  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

  var data = canvas.getContext('2d').getImageData(0,0, img.height, img.width).data;
  var normPixels = []
  for (var i = 0, n = data.length; i < n; i += 4) {
    // get the average value of R, G and B.
    normPixels.push((data[i] + data[i+1] + data[i+2]) / 3); //Essentially render image black and white
  }

  return normPixels;
}

// Create a mesh from pixel data
function addMesh() {

  var numSegments = img.width-1; //Equal to number of image pixels - 1

  geometry = new THREE.PlaneGeometry(2400, 2400, numSegments, numSegments);

  material = new THREE.MeshBasicMaterial({
    wireframe: true,
    map: texture
  });

  terrain = getTerrainPixelData();

  for (var i = 0, l = geometry.vertices.length; i < l; i++) // For each vertex
  {
    var terrainValue = terrain[i] / 255;
    geometry.vertices[i].z = geometry.vertices[i].z + terrainValue * 800 ; // Define height of vertices against image pixel data
  }

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh)
}

// Function to render scene and camera
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000); //Field-of-View, Aspect Ratio, Near Render, Far Render
camera.position.z = 3000; // Camera distance

renderer = new THREE.WebGLRenderer();
controls = new THREE.OrbitControls( camera, renderer.domElement );

addMesh();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

render();

body {
  margin: 0;
}

#canvas {
  display: none;
}

#assets {
  display: none;
}

<html>
<head>
  <title>Landscape Test</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="assets"><img id="landscape-image" src="assets/Heightmap2.png"/></div>
  <canvas id="canvas"></canvas>
  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script> <!-- added so user can rotate the scene with the mouse -->
  <script src="js/app.js"></script>
</body>
</html>