使用 three.js 将场景渲染到自定义网格上

Question

在弄乱 this demo of Three.js rendering a scene to a texture 之后，我在我的项目中成功地复制了它的本质：在我的主场景中，有一个现在的球体，并且通过 THREE.WebGLRenderTarget 在其上绘制了一个次要场景缓冲区。

不过，我真的不需要球体，而这正是我碰壁的地方。尝试将缓冲区映射到我的简单自定义网格时，我得到了以下错误的无限流：

three.js:23444 WebGL: INVALID_VALUE: pixelStorei: invalid parameter for  alignment
three.js:23557 Uncaught TypeError: Cannot read property 'width' of undefined

我的几何形状，近似于 annular shape, is created using this code。我已经通过将 {map: new THREE.Texture(canvas)} 传递到材质选项中成功地将 canvas UV 映射到它上面，但是如果我使用 {map: myWebGLRenderTarget} 我会得到上面的错误。

粗略查看调用堆栈，看起来 three.js 假设 myWebGLRenderTarget 上存在 texture.image 属性并尝试对其调用 clampToMaxSize .

这是 three.js 中的错误还是我只是做错了什么？因为我只需要平面渲染（使用 MeshBasicMaterial），所以在调整上面的渲染到纹理演示时我做的第一件事就是删除所有着色器的痕迹，并且它只适用于球体。我是否需要恢复那些着色器才能使用 UV 贴图和自定义网格？

Answer 1

为了它的价值，我不必要地在我的纹理上设置 needsUpdate = true。（needsUpdate 的处理显然假定存在纹理所基于的 <canvas>。）

使用 three.js 将场景渲染到自定义网格上

Render scene onto custom mesh with three.js

three.js

webgl

uv-mapping