Question

我需要在给定xyz点（鼠标点击+光线投射）的网格上获得图像纹理的颜色。我怎样才能在THREE.js中实现它？

我知道我可以使用普通webgl中的gl.readPixels，但对我来说这不是一个有效的选项。

谢谢！

Answer 1

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

// 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);
  }
};

由于

通过xyz坐标获取像素的颜色

1 个答案: