Help with some vertex color (with alpha) code

Questions
1

I’m attempting to create a mesh with indexed bufferGeometry. It needs to have vertex colors with an alpha channel. I’m doing something like this (summarized):

	thisColor     = thisMaterial.color;

	var vertexColors	= [];

	for (jj=0; jj<vertexCount; jj++) {
			vertexColors[4*jj+0] = thisMaterial.color.r;
			vertexColors[4*jj+1] = thisMaterial.color.g;
			vertexColors[4*jj+2] = thisMaterial.color.b;
			vertexColors[4*jj+3] = 1.0;
	}

	var myColorAttribute    = new THREE.Float32BufferAttribute(vertexColors, 4);

	var newGeometry 	= new THREE.BufferGeometry();

	newGeometry.setAttribute( 'color',   myColorAttribute );

	thisMaterial.vertexColors 			= true
	thisMaterial.needsUpdate  			= true;

	newGeometry.attributes.color.needsUpdate 	= true;

Excuse the archaic coding style (My name says it all) :slight_smile:
Does it look OK?
Thanks

OLDMAN

2

There is nothing archaic about your code and I bet you’re not that old.

I don’t see the material’s transparent property, try material.transparent = true.

I’m guessing this isn’t the production code, cause the following lines:

for (jj=0; jj<vertexCount; jj++) {
		vertexColors[4*jj+0] = thisMaterial.color.r;
		vertexColors[4*jj+1] = thisMaterial.color.g;
		vertexColors[4*jj+2] = thisMaterial.color.b;
		vertexColors[4*jj+3] = 1.0;
}
var myColorAttribute    = new THREE.Float32BufferAttribute(vertexColors, 4);

Does the same thing as:

new THREE.MeshBasicMaterial({
    color: 0xffffff,
    opacity: 1,
    transparent: true,
  });

And BufferGeometry need a position attribute too.

3

Thanks
I’m aware of what you said: the code is just the simplified first part of a more elaborate process. That’s why it looks incomplete/inefficient.

But…

I had forgotten the material.transparent=true line.

OLDMAN

1 Like