三.js 贴图 mesh.geometry.attributes.uv

Question

I am currently working on a 3D configurator. So I should be able to import a logo on a FBX object, which normally already have UV coordinates. The problem is : I am struggling since 3 days ago, trying to import a texture on a mesh but I can't map it using his UVs coordinates.

So, I have a texture with a logo.

When I map it on a simple Cube, no problem, it is working :

But when I try to apply the same texture to my mesh :

The texture is cropped. So I've been looking inside the mesh json tree and I found it :

So there are uv coordinates, but it seems different from my cube because, when I look to his json, I don't find the same tree which is (on the cube) :

And finally, this is my code :

if(myMesh.name == 'Logo'){

    // Texture

    var texture = new THREE.TextureLoader().load('img/logoTesla_Verre_green.jpg', function(){
        texture.needUpdate = true;

        // Material

        var material = new THREE.MeshLambertMaterial( {map: texture, morphTargets: true} );
        material.needUpdate = true;

        // Geometry Cube

        var geometry = new THREE.BoxGeometry( 40, 40, 40 );

        // Cube 

        var cube = new THREE.Mesh( geometry, material);
        scene.add(cube);

        // Duplicate logo mesh for testing 

        var newGeometry = myMesh.geometry;
        var newMesh = new THREE.Mesh( newGeometry, material);
        newMesh.position.y = 100;
        newMesh.geometry.uvsNeedUpdate = true;
        scene.add(newMesh);
    });
}

My question is : Should I use the geometry.attributes.uv object to map my texture ? If yes, how to do that ?

Or should I convert these UV coordinates to a geometry.faceVertexUvs ???

Please, help me, I am totally lost :)

Answer 1

Nevermind, it has been solved by exporting the .fbx again. Now the mapping is working fine !

But I don't know why...

Answer 2

Thank you for your question and answer. I was having the same problem where my custom FBX I imported was only taking the bottom left pixel of the canvas as the color for the whole mesh. (I was using texture = new THREE.CanvasTexture(ctx.canvas); to get my texture).

The issue for me was that the FBX had no UV mapping! How I solved it was I imported the fbx to maya, opened up the UV editor (under the modeling menu mode got to UV->UV editor ) then in the UV editor there was a Create section and I hit one of those options (i chose cylinder) and then exported it with the default fbx settings. I am very grateful this worked.

You can see the result of using a canvas context as a custom FBX texture here: www.algorat.club/sweater