Three.js texture model not applying properly across object

Question

I have a surfboard obj file and I want to apply a texture on the top and bottom faces but it the texture splits in the middle when I want it applied across the face. Also the material gets applied on the inside of the mesh. Is the problem to do with the model or did I miss something in the code?

var loader = new THREE.OBJLoader();

    var texture = new THREE.Texture();
    var ImageLoader = new THREE.ImageLoader();
    ImageLoader.load("models/white.jpg", function (image) {
        texture.image = image;
        texture.needsUpdate = true;
    });

    var custom = new THREE.Texture();
    var customLoader = new THREE.ImageLoader();
    customLoader.load("models/UV_Grid_Sm.jpg", function(image) {
        custom.image = image;
        custom.mapping = THREE.UVMapping;
        custom.needsUpdate = true;
    });


    loader.load("models/Hidden 5'4-19'5-2 (Holes_Patched).obj", function(object){
        object.traverse(function(child) {

            if (child instanceof THREE.Mesh) {

                if(child.name === 'Bottom') {
                    child.material = new THREE.MeshStandardMaterial({ map: custom});

                }
                else if(child.name === 'Top') {
                    child.material = new THREE.MeshStandardMaterial({ map: custom});

                }
                else  {
                    child.material = new THREE.MeshStandardMaterial({ map: texture});

                }
            }

        });

download obj file here The object has two group named "Top" but I can change that later.

Image of problem

The uv of your 3d model is not proper.Update the uv using any 3d software such as Blender — ArUn

2pha 2pha · Accepted Answer · 2016-05-13T05:43:36

You need to add/set a UV coordinates on the model. This needs to be done in 3d software (3DS Max for example).
Also, you should really clean up / optimise your model by removing edges and vertices which are not needed (134 thousand verts ??)

Three.js texture model not applying properly across object

1 Answers