Question

我想渲染场景中矩形部分的纹理，就像在three.js framebuffer official documentation中的例子一样。我看了一下代码，有些事情我不明白，

// calculate start position for copying data

            vector.x = ( window.innerWidth * dpr / 2 ) - ( textureSize / 2 );
            vector.y = ( window.innerHeight * dpr / 2 ) - ( textureSize / 2 );

            renderer.copyFramebufferToTexture( vector, texture );

copyFrameBufferToTexture的第一个参数是Vector2，它是复制数据的起始位置。

这个公式是什么意思？

是世界位置还是屏幕位置？

我的目的是将div元素插入DOM，然后获取div元素内部的所有像素数据。

Answer 1

解决方案

通过查看copyFramebufferToTexture的源代码，我发现它使用了copyTexImage2D，其中（x，y）是窗口的左下角（0,0）。

所以要回答我的问题，上面的公式是从左下角开始的坐标窗口。

然后，如果有人想通过使用div元素定界来提取场景的一部分，则我使用了以下公式：

vector.x = divElement.offsetLeft;
vector.y = webglRenderer.getSize().height - divElement.offsetTop - textureHeight;

在THREE.JS中将场景的一部分提取为纹理

1 个答案: