Question

我正在尝试在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 );

Answer 1

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

改变像素颜色值

1 个答案: