通过其XYZ坐标获取像素的颜色

Question

我需要在给定的XYZ点上获得网格上图像纹理的颜色（鼠标click click ray cast）。我该如何在三分中实现？

我知道我可以使用Plain WebGL的GL.Readpixels，但这对我来说不是一个有效的选择。

谢谢！

Answer 1

所以我用单独的画布结束了，其中我加载图像纹理，将三个.js坐标转换为帆布一个并读取像素。这样的东西：

// point is a THREE.Vector3
var getColor = function(point, callback) {
  var img = new Image();
  img.src = 'assets/img/myImage.png';
  img.onload = function() {
    // get the xy coords from the point
    var xyCoords = convertVector3ToXY(point);
    // create a canvas to manipulate the image
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    // get the pixel data and callback
    var pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
    callback(pixelData);
  }
};

谢谢