Three.js gpu拾取-精灵周围的不可见像素

我正在渲染包含精灵的拾取场景。当我的光标靠近精灵时，它会注册为一种颜色并被“拾取”。当您放大精灵时，此不可见边框会变大

打开控制台以查看实时打印的ID。将光标移近或移远到大精灵和小精灵。您将看到精灵在不可见的边框上被选中。这种行为不会发生在常规几何体中，而只发生在精灵中

这很奇怪，因为我正在渲染

renderer.readRenderTargetPixels

实际看到的内容

我怎样才能摆脱看不见的边界，以便更准确地拾取

var渲染器、场景、摄影机、控件；
var粒子，均匀；
var粒径=50；
var raycaster，相交；
var小鼠，交叉；
var-pickingTexture；
var Numof顶点；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'container'）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=150；
//
var geometry1=新的三箱几何（2002002002004,4,4）；
var顶点=geometry1.顶点；
numoftexts=顶点.length；
var positions=新的Float32Array（顶点.length*3）；
var colors=新的Float32Array（顶点.length*3）；
变量大小=新数组（顶点.长度）；
var顶点；
var color=new THREE.color（）；
对于（var i=0，l=vertices.length；ivar id=（pixelBuffer[0]问题在于，您所使用的设备的devicePixelRatio！=1.0，大小大约为3.js

因为您调用了
renderer.setPixelRatio
现在魔术就发生在幕后。您的画布不是您要求的大小，而是基于three.js代码中隐藏的某个公式的其他大小

那么，发生了什么。画布只有一个大小，但渲染目标的大小不同。着色器使用
gl_PointSize
绘制其点。该大小以设备像素为单位。由于渲染目标的大小不同，因此渲染目标中的点的大小与屏幕上的点的大小不同

删除对
render.setPixelRatio
的调用，它将开始工作

我认为解决这个问题的正确方法是自己使用
devicePixelRatio
，因为这样你就可以100%地看到正在发生的一切。没有什么神奇的事情发生在幕后

所以

摆脱容器，直接使用画布

<canvas id="c"></canvas>

这将使画布自动拉伸以填充窗口

使用浏览器拉伸画布的大小选择其drawingBuffer应为的大小，并乘以
deviceP
canvas { width: 100vw; height: 100vh; display: block; }
body { margin: 0; }

    canvas = document.getElementById("c");
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        canvas: canvas,
    });
    pickingTexture = new THREE.WebGLRenderTarget(1, 1, options);

    onWindowResize(); 

...

function onWindowResize() {

    var width = canvas.clientWidth * window.devicePixelRatio;
    var height = canvas.clientHeight * window.devicePixelRatio;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.setSize(width, height, false);  // YOU MUST PASS FALSE HERE otherwise three.js will muck with the CSS
    pickingTexture.setSize(width, height);  
}

    renderer.readRenderTargetPixels(
        pickingTexture, 
        mouse.x * window.devicePixelRatio, 
        pickingTexture.height - mouse.y * window.devicePixelRatio,
        1, 1, pixelBuffer);