Threejs UV mapping distortion

I have following problem image gets distorted along the face side (red line).
I have a few layers like this on each I have the same distortion.
I have double checked UV mapping and both faces have the same 2 UV coordinates for same 2 points. I would paste some code but it is a bit complex UV calculation. I am trying to see if somebody had a similar problem.

enter image description here

Uv mapping for this part (Red line matches picture above)
enter image description here

Here is the code for UV calculation but you probably wont be able to find an error there.

calculateNewUvMapping(vertices: Array<Vector3>): Array<Vector2> {

const orderedVertices = _.clone(vertices).reverse();

const newArray: Array<Vector2> = new Array<Vector2>();



const startV3 = orderedVertices[0];

const endV3 = orderedVertices[orderedVertices.length - 1];



const start = new Vector2(startV3.x, startV3.z);

const end = new Vector2(endV3.x, endV3.z);



// Distance between two vertices on scale from 0 to 1

const distanceAlpha = 1 / (orderedVertices.length - 1);



newArray.push(start);

for (let i = 1; i < orderedVertices.length - 1; i++) {

  const newUv = new Vector2();

  const interpolationValue = distanceAlpha * i;

  newUv.lerpVectors(start, end, interpolationValue);

  newArray.push(newUv);

}

newArray.push(end);



return newArray;

}

EDIT: Its not normals calculation.

edited Dec 3 '18 at 20:54

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

It is 3D projection we also exported model and opened it in blender uv mapping is same there so we are unsure whats wrong :). Also this bottom romb part is flat two faces are connected but they are forming a plane

– Dživo Jelić
Nov 27 '18 at 16:53

Sorry i meant it is a 3d model not projection

– Dživo Jelić
Nov 27 '18 at 17:04

I am calculating geometry on my own i am creating spherical-ish model and calculating faces and UV

– Dživo Jelić
Nov 27 '18 at 17:12

4

@DživoJelić Is this your issue? stackoverflow.com/questions/16880015/…

– WestLangley
Dec 3 '18 at 23:06

@WestLangley actually its this and its pretty decent answer but i am going to need some time to try it out. gamedev.stackexchange.com/questions/148082/…

– Dživo Jelić
Dec 3 '18 at 23:59

|
show 3 more comments

enter image description here

Uv mapping for this part (Red line matches picture above)
enter image description here

Here is the code for UV calculation but you probably wont be able to find an error there.

calculateNewUvMapping(vertices: Array<Vector3>): Array<Vector2> {

const orderedVertices = _.clone(vertices).reverse();

const newArray: Array<Vector2> = new Array<Vector2>();



const startV3 = orderedVertices[0];

const endV3 = orderedVertices[orderedVertices.length - 1];



const start = new Vector2(startV3.x, startV3.z);

const end = new Vector2(endV3.x, endV3.z);



// Distance between two vertices on scale from 0 to 1

const distanceAlpha = 1 / (orderedVertices.length - 1);



newArray.push(start);

for (let i = 1; i < orderedVertices.length - 1; i++) {

  const newUv = new Vector2();

  const interpolationValue = distanceAlpha * i;

  newUv.lerpVectors(start, end, interpolationValue);

  newArray.push(newUv);

}

newArray.push(end);



return newArray;

}

EDIT: Its not normals calculation.

edited Dec 3 '18 at 20:54

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

It is 3D projection we also exported model and opened it in blender uv mapping is same there so we are unsure whats wrong :). Also this bottom romb part is flat two faces are connected but they are forming a plane

– Dživo Jelić
Nov 27 '18 at 16:53

Sorry i meant it is a 3d model not projection

– Dživo Jelić
Nov 27 '18 at 17:04

I am calculating geometry on my own i am creating spherical-ish model and calculating faces and UV

– Dživo Jelić
Nov 27 '18 at 17:12

4

@DživoJelić Is this your issue? stackoverflow.com/questions/16880015/…

– WestLangley
Dec 3 '18 at 23:06

@WestLangley actually its this and its pretty decent answer but i am going to need some time to try it out. gamedev.stackexchange.com/questions/148082/…

– Dživo Jelić
Dec 3 '18 at 23:59

|
show 3 more comments

enter image description here

Uv mapping for this part (Red line matches picture above)
enter image description here

Here is the code for UV calculation but you probably wont be able to find an error there.

calculateNewUvMapping(vertices: Array<Vector3>): Array<Vector2> {

const orderedVertices = _.clone(vertices).reverse();

const newArray: Array<Vector2> = new Array<Vector2>();



const startV3 = orderedVertices[0];

const endV3 = orderedVertices[orderedVertices.length - 1];



const start = new Vector2(startV3.x, startV3.z);

const end = new Vector2(endV3.x, endV3.z);



// Distance between two vertices on scale from 0 to 1

const distanceAlpha = 1 / (orderedVertices.length - 1);



newArray.push(start);

for (let i = 1; i < orderedVertices.length - 1; i++) {

  const newUv = new Vector2();

  const interpolationValue = distanceAlpha * i;

  newUv.lerpVectors(start, end, interpolationValue);

  newArray.push(newUv);

}

newArray.push(end);



return newArray;

}

EDIT: Its not normals calculation.

edited Dec 3 '18 at 20:54

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

enter image description here

Uv mapping for this part (Red line matches picture above)
enter image description here

Here is the code for UV calculation but you probably wont be able to find an error there.

calculateNewUvMapping(vertices: Array<Vector3>): Array<Vector2> {

const orderedVertices = _.clone(vertices).reverse();

const newArray: Array<Vector2> = new Array<Vector2>();



const startV3 = orderedVertices[0];

const endV3 = orderedVertices[orderedVertices.length - 1];



const start = new Vector2(startV3.x, startV3.z);

const end = new Vector2(endV3.x, endV3.z);



// Distance between two vertices on scale from 0 to 1

const distanceAlpha = 1 / (orderedVertices.length - 1);



newArray.push(start);

for (let i = 1; i < orderedVertices.length - 1; i++) {

  const newUv = new Vector2();

  const interpolationValue = distanceAlpha * i;

  newUv.lerpVectors(start, end, interpolationValue);

  newArray.push(newUv);

}

newArray.push(end);



return newArray;

}

EDIT: Its not normals calculation.

three.js

edited Dec 3 '18 at 20:54

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

edited Dec 3 '18 at 20:54

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

edited Dec 3 '18 at 20:54

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

asked Nov 27 '18 at 2:05

Dživo Jelić

55111028

It is 3D projection we also exported model and opened it in blender uv mapping is same there so we are unsure whats wrong :). Also this bottom romb part is flat two faces are connected but they are forming a plane

– Dživo Jelić
Nov 27 '18 at 16:53

Sorry i meant it is a 3d model not projection

– Dživo Jelić
Nov 27 '18 at 17:04

I am calculating geometry on my own i am creating spherical-ish model and calculating faces and UV

– Dživo Jelić
Nov 27 '18 at 17:12

4

@DživoJelić Is this your issue? stackoverflow.com/questions/16880015/…

– WestLangley
Dec 3 '18 at 23:06

@WestLangley actually its this and its pretty decent answer but i am going to need some time to try it out. gamedev.stackexchange.com/questions/148082/…

– Dživo Jelić
Dec 3 '18 at 23:59

|
show 3 more comments

It is 3D projection we also exported model and opened it in blender uv mapping is same there so we are unsure whats wrong :). Also this bottom romb part is flat two faces are connected but they are forming a plane

– Dživo Jelić
Nov 27 '18 at 16:53

Sorry i meant it is a 3d model not projection

– Dživo Jelić
Nov 27 '18 at 17:04

I am calculating geometry on my own i am creating spherical-ish model and calculating faces and UV

– Dživo Jelić
Nov 27 '18 at 17:12

4

@DživoJelić Is this your issue? stackoverflow.com/questions/16880015/…

– WestLangley
Dec 3 '18 at 23:06

@WestLangley actually its this and its pretty decent answer but i am going to need some time to try it out. gamedev.stackexchange.com/questions/148082/…

– Dživo Jelić
Dec 3 '18 at 23:59

It is 3D projection we also exported model and opened it in blender uv mapping is same there so we are unsure whats wrong :). Also this bottom romb part is flat two faces are connected but they are forming a plane

– Dživo Jelić
Nov 27 '18 at 16:53

Sorry i meant it is a 3d model not projection

– Dživo Jelić
Nov 27 '18 at 17:04

I am calculating geometry on my own i am creating spherical-ish model and calculating faces and UV

– Dživo Jelić
Nov 27 '18 at 17:12

@DživoJelić Is this your issue? stackoverflow.com/questions/16880015/…

– WestLangley
Dec 3 '18 at 23:06

@WestLangley actually its this and its pretty decent answer but i am going to need some time to try it out. gamedev.stackexchange.com/questions/148082/…

– Dživo Jelić
Dec 3 '18 at 23:59

|
show 3 more comments

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53491737%2fthreejs-uv-mapping-distortion%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl