Изменение значения цвета пикселя для того же

Question

Я пытаюсь создать интерактивную карту в webgl. Каждый участник изображения карты заполняется уникальным цветом. Когда пользователь нажимает на изображение, я читаю pixeldata iof, щелкнув по точке с помощью readPixels(), и в зависимости от цвета пикселя, который я намерен выделить для справки. Но нажатие на ту же страну возвращает немного другой цвет каждый раз, приводя к неправильной информации о стране, нажатой.

Как устранить ошибку при поиске точного цвета точки на изображении, пользователь нажал? Являются ли тени или эффекты освещения причиной этой проблемы? Или существует другой подход, чтобы определить, где пользователь нажал на изображение и в какой стране он соответствует?

var texture = THREE.ImageUtils.loadTexture('map_indexed.png'); 
var material = new THREE.MeshLambertMaterial({map: texture}); 

var sphere = new THREE.Mesh(new THREE.SphereGeometry(globeRadius, globeRadius, globeRadius),material); 
sphere.overdraw = true; 
scene.add(sphere); 

Чтение пиксельные данные

var x = e.pageX ; 
      var y = e.pageY ; 
      var canvas = document.getElementById('canvas'); 


      var gl = renderer.getContext(); 

      //read the pixel under the mouse from the texture 

      var pixelBuffer = new Uint8Array(4); 

      var xp=gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer); 

Answer 1

Действительно, затенение/световые эффекты могут изменить цвет. Попробуйте использовать материал MeshBasicMaterial вместо MeshLambertMaterial и посмотрите, помогает ли он (MeshBasicMaterial не нуждается в огнях в вашей сцене).