0

我正在尝试在 webgl 中创建交互式地图。地图图像中的每个国家都充满了独特的颜色。当用户单击图像时，我使用 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 );
4

1 回答 1

0

实际上，阴影/照明效果可能会改变颜色。尝试使用 MeshBasicMaterial 材质而不是 MeshLambertMaterial 并查看是否有帮助（MeshBasicMaterial 在您的场景中不需要灯光）。

于 2013-04-01T13:32:50.947 回答