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

【问题标题】：Extract a part of scene as texture in THREE.JS在 THREE.JS 中提取场景的一部分作为纹理
【发布时间】：2023-04-01 04:21:01
【问题描述】：

我想渲染我的场景的矩形部分的纹理，如 three.js 帧缓冲区 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，它是复制数据的起始位置。

这个公式是什么意思？

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

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

【问题讨论】：

我认为最好将解决方案作为答案而不是作为问题的一部分发布。

标签： javascript three.js html5-canvas

【解决方案1】：

解决方案

通过查看copyFramebufferToTexture的源代码，我看到它使用了copyTexImage2D，其中(x,y)是你窗口的左下角(0,0)。

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

然后如果有人想通过 div 元素分隔来提取场景的一部分，我使用了这个公式：

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

【讨论】：