在 div 的范围内绘制

Question

我将像素坐标连同 div 的大小作为制服传递给着色器：

const targetElement = document.querySelector(".targetElement");
const targetElementW = targetElement.clientWidth;
const targetElementH = targetElement.clientHeight;
const targetElementX = targetElement.getBoundingClientRect().left;
const targetElementY = targetElement.getBoundingClientRect().top;

material.uniforms = {
    uTargetCoords: { value: new THREE.Vector2(targetElementX, targetElementY) },
    uTargetSize: { value: new THREE.Vector2(targetElementW, targetElementH) },
};

要将像素坐标转换为屏幕坐标，我使用这个：

float x_ndc = 2.0f * (uTargetCoords.x + 0.5f) / uTargetSize.x - 1.0f;
float y_ndc = 2.0f * (uTargetCoords.y + 0.5f) / uTargetSize.y - 1.0f;
vec3 newposition = vec3(x_ndc, y_ndc, position.z);
gl_Position =  vec4( newposition, 1.0 );

我想在 div 的顶部和边界内放置一个着色器。 屏幕上没有任何内容。 谢谢你的任何建议。