Search code examples
javascriptmodelthree.jstextures

How can I add colour to a .obj model in Three.js?

I am creating a WebGL scene with Three.js and I have the next problem: I am trying to load a .obj model with Three.js, and I want to add a color (blue, for example), to that .obj model, instead of a mtl texture. I try to do this way:

// instantiate a loader
var loader = new THREE.OBJLoader();

// load a resource
loader.load(
    // resource URL
    'model_path.obj',
    // Function when resource is loaded
    function ( object ) {
        scene.add( object );
    }
);

But I have the next error that says:

WebGL: INVALID_VALUE: bufferData: no data
Uncaught TypeError: Cannot read property 'length' of undefined
[.CommandBufferContext]GL ERROR :GL_INVALID_VALUE : glVertexAttribPointer: size GL_INVALID_VALUE

How could I correct the error, to load an obj model with blue color?

Thank you so much!

Solution

  • Hey the error seems the vertex points are not there with the file. OBJ file is the simple raw file with

    v :::: vertex

    vt :::: texture coordinate

    vn :::: normal

    usemtl ::: define the texture,ka(ambient),ks(specular) and kd(diffused)

    try to import your obj into the blender and then export with the triangulated face on like this: enter image description here

    actually if you don't do this the indices appear to you in face4 format like:

    0/1/2/3 3/2/4/0 .... so on after triangulation they appear like:

    0/1/2 3/2/0 ...

    So when you correct your *.obj you can load the file in three parser and add the material to the children.