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

时间:2015-01-21 23:55:58

标签: three.js webgl uv-mapping

在弄乱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创建近似this code形状的几何体。通过将canvas传递到材料选项中,我已成功将{map: new THREE.Texture(canvas)}映射到其上,但如果我使用{map: myWebGLRenderTarget},我会收到上述错误。

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

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

1 个答案:

答案 0 :(得分:2)

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