Texture mapping problem

Questions
,
1

Hello, I am new to three.js. I am working on a website where a user can upload an image of the fabric and three.js will wrap the fabric over the model.

I am trying to do something similar to this: Texture Wrapping Problem At Connection Points

Here is the image of the model after texture mapping: https://pasteboard.co/J3rWnfe.png
(The model has white clothes default)

Here is the image of the texture I am using: https://pasteboard.co/J3rX7jv.jpg

The patterns in the image are not being mapped on the model. (leaves, flowers, etc)

Here is the code:

    > init();
> 
>   function init() {
> 
>     const MODEL_PATH = 'dress.glb';
>     const canvas = document.querySelector('#c');
>     const backgroundColor = 0xf1f1f1;
> 
>     // Init the scene
>     scene = new THREE.Scene();
>     scene.background = new THREE.Color(backgroundColor);
>     scene.fog = new THREE.Fog(backgroundColor, 60, 100);
> 
>     // Init the renderer
>     renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
>     renderer.shadowMap.enabled = true;
>     renderer.setPixelRatio(window.devicePixelRatio);
>     document.body.appendChild(renderer.domElement);
> 
>     // Add a camera
>     camera = new THREE.PerspectiveCamera(
>     50,
>     window.innerWidth / window.innerHeight,
>     0.1,
>     1000);
> 
>     camera.position.z = 30;
>     camera.position.x = 0;
>     camera.position.y = -3;
> 
>     let stacy_txt = new THREE.TextureLoader().load('leaf.jpg');
>     stacy_txt.flipY = false;
> 
>     const stacy_mtl = new THREE.MeshPhongMaterial({
>       map: stacy_txt,
>       color: 0xffffff,
>       skinning: true });
> 
> 
> 
>     var loader = new THREE.GLTFLoader();
> 
>     loader.load(
>     MODEL_PATH,
>     function (gltf) {
>       model = gltf.scene;
>       let fileAnimations = gltf.animations;
> 
>       model.traverse(o => {
> 
>         if (o.isMesh) {
>           o.castShadow = true;
>           o.receiveShadow = true;
>           o.material = stacy_mtl;
>         }
>         // Reference the neck and waist bones
>         if (o.isBone && o.name === 'mixamorigNeck') {
>           neck = o;
>         }
>         if (o.isBone && o.name === 'mixamorigSpine') {
>           waist = o;
>         }
>       });
> 
>       model.scale.set(7, 7, 7);
>       model.position.y = -11;
> 
>       scene.add(model);
2

Any chances to share the glTF asset in this topic?

1 Like
3

Here is my model file: dress.glb (1.7 MB)

4

First of all when importing your model into gltf-viewer, the glTF validation report shows 50 errors. If you author the model by yourself, you should try to get rid of them. Besides, next to the dress there are some unusual elements visible. You can see them at the following screenshot at the top left:

image
image1326Ă—1282 150 KB

Anyway, after inspecting the texture coordinates, it seems the scale of the uv attribute is for some reasons very unusual. Check out the screenshot that shows some of the texture coordinates:

image

Applying a texture won’t produce proper results with such values. They range should be more in the area of [0,1].

5

@aiman Hello! Please don’t use pasteboard, all your links are broken now, with “image not found” which doesn’t help future readers. Please upload images directly here in the forum.