Three.js reuse geometry for faceColors and vertexColors

问题

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).

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 ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1.

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.

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.

fiddle

回答1:

EDIT: Issue resolved.

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

three.js r.88

回答2:

First of all, always make sure you try the latest three.js everywhere. especially, do not use the jsfiddle's r54 but instead use an up-to-date external resource like http://threejs.org/build/three.min.js - this solves one of your problems.

The main thing is that you need to update the vertex colors between the render calls (and if they are changed, you have to do that anyway). Here's what does the trick:

function render () {
    var SCREEN_WIDTH = WIDTH, SCREEN_HEIGHT = HEIGHT;
    camera.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();

    renderer.clear();

    geometry.colorsNeedUpdate = true;

    // left side
    renderer.setViewport( 0, 0,  0.5 * SCREEN_WIDTH, SCREEN_HEIGHT );
    renderer.render( scene, camera );

    geometry.colorsNeedUpdate = true;    

    // right side
    renderer.setViewport( 0.5 * SCREEN_WIDTH, 0, 0.5 * SCREEN_WIDTH, SCREEN_HEIGHT );
    renderer.render( pickRenderScene, camera );
}

http://jsfiddle.net/E3F4f/4/

来源：https://stackoverflow.com/questions/20550021/three-js-reuse-geometry-for-facecolors-and-vertexcolors

标签

javascript

three.js

WebGL