Upgrade threejs, start adding colors again

I have a triangle, used to have color but now I’m upgrading to the latest version of threejs.

The code to make the triangle, looks like this:

moa3d.prototype.triangle=function(object){
    var material=object.surface.material;

    var material=ext.threejs_api.get_material_lambert(object.id, material);
    material.side=ext.threejs_api.set_side({to:'both'});
    material.color='0xFF0000';

    // Geometry
    var geometry=ext.threejs_api.geometry_triangle(object);

    // Painting
    var painting=ext.threejs_api.mesh(geometry, material);

    return painting;
    };

mthreejs_api.prototype.get_material_lambert=function(caller, material){
    var material=new THREE.MeshLambertMaterial({
        color:  material.color,
        });
    
    return material;
    };

mthreejs_api.prototype.geometry_triangle=function(object){
    var points=object.geometry.points;
    var color=object.surface.color;

    var p1=points[0];
    var p2=points[1];
    var p3=points[2];

    var v1=new THREE.Vector3(p1.x,p1.y,p1.z);
    var v2=new THREE.Vector3(p2.x,p2.y,p2.z);
    var v3=new THREE.Vector3(p3.x,p3.y,p3.z);

    var geometry=new THREE.BufferGeometry().setFromPoints([v1, v2, v3]);
    //geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

 return geometry;
 };

mthreejs_api.prototype.mesh=function(geometry, material){
    var mesh=new THREE.Mesh(    
        geometry,
        material,
        );

    return mesh;
    };

mthreejs_api.prototype.set_side=function(args){
    var to=args.to;

    if(to=='both')  {return THREE.DoubleSide;}
    if(to=='front') {return THREE.FrontSide;}
    if(to=='back')  {return THREE.BackSide;}
    };

I have been trying to google this, plus reading the threejs website. But it’s absolutely not clear, how I should go about adding the color.

I managed to start drawing the triangle again, by introducing the buffergeometry line.
The setattribute line, commented below it, is where i’m trying to, but failing, at adding the color.

How do I color to the triangle now?

if you want it as a CSS-string, then it has to be material.color = '#ff0000', otherwise for a hex-value it has to be material.color = 0xFF0000 :thinking:

I don’t get it I have tried

    material.color='#ff0000';

And

    material.color=0xFF0000;

And

    material.color='0xFF0000';

But the triangle always remains just black.

Is there some .setHex?

As you use MeshLambertMaterial, do you have a light source in your scene?

Oh, and try after this line
var geometry=new THREE.BufferGeometry().setFromPoints([v1, v2, v3]);
to add
geometry.computeVertexNormals();

I added

geometry.computeVertexNormals();

after the buffergeometry line.

I get no error.

Then I tried to change the color in the 3 different ways I posted but it still always remains black.

Yes I have a light source, you can actually see the system here:

https://openage.org/it/3d/

You might need to refresh the browser a few times.

The triangle who’s color I’m trying to change is just the one straight infront in the beginning.

buttons are:
wasdeq
1,2, and z.

Then try material.color.set(0xff0000);

1 Like

That’s it, that’s the solution.

Can see the triangle in the link is now red.

Why wasn’t I able to find this?
Is it something I’m doing wrong or is the documentation not up to par or what’s going on?

Partially, this is my fault, as I somehow didn’t realize, that material.color = 0xff0000; or material.coor = '#ff0000' is wrong (sorry, it was a hard day :slight_smile: ). Doing this, you assign a string or a hex-value to the property, which is THREE.Color.
But the docs is pretty clear of what and how you have to do to set color.

1 Like