three.js how to move the starting point of mapping?

Question

How should I move the starting point of a mapping texture?

This is an obj file with uv_grid texture.

It shows a line (starting point) on the center, but what I want to do, is to move the starting point of mapping to the side like below.

My code:

var loader = new THREE.ImageLoader();
loader.load("../img/white.jpg", function(image) {
    texture.minFilter = THREE.LinearFilter;
    texture.image = image;
    texture.wrapS = THREE.ClampToEdgeWrapping;
    texture.wrapT = THREE.ClampToEdgeWrapping;
    texture.needsUpdate = true;
}, onProgress, onError);

var loader = new THREE.OBJLoader();
loader.load('../models/body.obj', function(object) {
    object.traverse(function(child) {

        if (child instanceof THREE.Mesh) {
            child.material.map = texture;
        }
    });
    object.name = "object";
    object.position.y = 0;
    scene.add(object);
}, onProgress, onError);

score 0 · Answer 1 · answered Sep 19 '16 at 22:00

First thing you should try is to adjust the texture offset and repeat-parameters and see if that gives you good enough results.

If that doesn't help, you will probably have to create a new UV-map that does what you want (you didn't mention what it is that you are trying to do). To create a new UV-map there are basically two options for you:

a) create a new UV-map in three.js mathematically. There are a few options for that, with different complexity and more or less promising results. What might work in your case would be a double front/back planar projection. That would be a bit like taking a photo from front and back and using those two pictures together as texture.

b) but, especially if you want to have the seams at just the right places, you might want to learn how to do uv-unwrapping using 3d-software (blender for instance. Has a really stepp learning-curve, but every 3d-software has and blender is free and opensource and actually pretty good). Here's a video-tutorial that contains a lot of useful stuff in that direction: https://www.youtube.com/watch?v=o9TGJj4DvjU

three.js how to move the starting point of mapping?

1 Answers1