我使用THREE.Points网格来显示图像。图像的点相互作用并可以在场景中飞行。但是我遇到了THREE.PointsMaterial Size属性的问题。
使用1的大小,我期望彼此相邻的两个点对齐并且没有间隙地触摸。但是,我的经验是像素之间存在显着差距。例如,顶点x:10,y:10和x:11,y:10不接触并且它们之间有间隙。
我已尝试增加像素大小以消除差距,并找到2.5种作品的大小。
为什么我需要使用~2.5的大小来获得两个无间隙对齐的点? 我可以调整网格|场景|渲染器单位/比例,以便大小为1会使像素无间隙对齐吗?
以下是我创建Points网格的代码片段:
var g = new THREE.Geometry();
for (i = 0; i < imgData.pixels.length; i++) {
g.vertices.push(new THREE.Vector3(imgData.pixels[i].x - (imgData.width / 2), 0 - imgData.pixels[i].y + (imgData.height / 2), 0));
g.colors.push(new THREE.Color(imgData.pixels[i].color));
}
var mat = new THREE.PointsMaterial({ size:1, vertexColors: THREE.VertexColors });
points = new THREE.Points(g, mat);
points.matrixAutoUpdate = false;
world.scene.add(points);