Three.js 为 faceColors 和 vertexColors 重用几何体 [英] Three.js reuse geometry for faceColors and vertexColors

问题描述

我希望同一个对象渲染两次，一次在屏幕上，一次在屏幕外.屏幕上的网格有一个几何体和一个 MeshLambertMaterial.该材质具有 vertexColors: THREE.VertexColors.屏幕外网格具有相同的几何形状和带有 vertexColors: THREE.FaceColors 的 MeshBasicMeterial.在初始设置期间，每个 faceColor 都设置为唯一的颜色.每个 vertexColor 都设置为单一颜色(稍后这些 vertexcolor 可以通过在对象上绘画"来改变).

I want the same object to be rendered twice, once on-screen and once off-screen. The on-screen mesh has a geometry and a MeshLambertMaterial. This material has vertexColors: THREE.VertexColors. The off-screen mesh has the same geometry and a MeshBasicMeterial with vertexColors: THREE.FaceColors. During initial setup each faceColor is set to a unique color. Each vertexColor is set to a single color (Later these vertexcolors can change by "painting" on the object).

然后我想渲染两个对象.在 this fiddle 中，您会看到并排渲染两个场景的效果.带有 MeshLambertMeterial 的对象现在是半红色以使事情更清晰.如您所见，两个场景似乎都使用了相同的材质.另外，当我切换顺序时，出现以下错误:

Then I want to render both object. In this fiddle you see how that looks with two scenes rendered side by side. The object with the MeshLambertMeterial is now half red to make things clearer. As you can see, both scenes seem to use the same material. Also, when I switch the order I get the following error:

[.WebGLRenderingContext]GL 错误:GL_INVALID_OPERATION:glDrawElements:尝试访问属性 1 中超出范围的顶点.

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1.

更奇怪的是，当运行 fiddle 时，我看到用 MeshBasicMaterial 渲染的对象两次.但是，当我在本地运行 完全 相同的代码时，我看到使用 MeshLambertMaterial 渲染的对象两次.

To make things even weirder, when run the fiddle I see the object rendered with the MeshBasicMaterial twice. However, when I run the exact same code locally, I see the object rendered with the MeshLambertMaterial twice.

最终我希望带有 MeshBasicMeterial 的对象渲染到渲染目标，但是我遇到了同样的问题.我希望能够在屏幕上显示带有 LambertMetarial 的对象，当我用鼠标将鼠标悬停在对象上时，可以在渲染目标中的该位置获取颜色，BasicMaterial 被渲染到该位置.

Eventually I want the object with the MeshBasicMeterial to render to a rendertarget, but with that I run into the same problems. I want to be able to show the object with the LambertMetarial on screen and when I hover over the object with the mouse, to get the color in that position in the renderTarget, where the BasicMaterial is rendered to.

我希望问题很清楚，如果没有，请告诉我.

I hope it is clear what the problem is, if not, please let me know.

小提琴

推荐答案

问题已解决.

当使用 WebGLRenderer 时，具有不同材质的两个网格现在可以共享一个几何体.

When using WebGLRenderer, two meshes having different materials can now share a geometry.

three.js r.88

three.js r.88

这篇关于Three.js 为 faceColors 和 vertexColors 重用几何体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！