In my current project using the latest version of three.js, I have a scene with a 2D mesh that has gradient colors assigned to each vertex. I am trying to retrieve the value of every point on the gradient by simply clicking on it with the mouse, extracting the color information and performing some calculations based on that.
Previously, I attempted to implement a similar approach which seemed promising in this example: http://jsbin.com/wepuca/2/edit?html,js,output
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function echoColor(e){
var imgData = ctx.getImageData(e.pageX, e.pageX, 1, 1);
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
console.log(red + " " + green + " " + blue + " " + alpha);
}
However, I encountered an issue as this method is designed to extract data from a canvas displaying an image, not from a mesh object. When attempting to apply it to my mesh, I received errors such as "TypeError: ctx is null" or "imageData is not a function" (depending on how I defined my canvas and its context).
Having searched for solutions without success, I am reaching out here to inquire whether this technique can be adapted for use with a mesh or if there are alternative methods available.
Your help is greatly appreciated.