Texture rendering problems

Question

Hej there,

i have a problem with the rendering of a texture on an OBJ imported model.

In this image you can see, how the texture is rendered.

and here you can see how the texture should look (mapped to the object)

And here is my code:

      loader = new THREE.ImageLoader();
      loader.load('./tex/Stuhl1-vorn.jpg', function (image) {
          var imageObj = new Image();
          imageObj.src = $(image).prop('src');

          var canvas = document.createElement("canvas");
          canvas.width = imageObj.width;
          canvas.height = imageObj.height;

          var ctx = canvas.getContext("2d");
          ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, canvas.width, canvas.height);

          texture.image = canvas;
          texture.needsUpdate = true;
      });

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

      var loader = new THREE.OBJLoader(manager);
      loader.load('obj/sitz.obj', function (object) {
          object.traverse(function (child) {
              if (child instanceof THREE.Mesh) {
                  child.material = material;
                  child.side = THREE.FrontSide;
              }
          });

          object.position.y = -400;
          scene.add(object);

      }, onProgress, onError);

Answer 1

It looks to me like your imported model does not have uvw coordinates.
Load the model into a 3d modelling program, add uvw coordinates, export with uvw coordinates.

Or if you want to do it in code, maybe this question/answer will help: THREE.js generate UV coordinate