Quantcast
Channel: Tileable texture in Three.js - Stack Overflow
Viewing all articles
Browse latest Browse all 2

Tileable texture in Three.js

$
0
0

Hello I have created simple renderer for my 3D objects (php generated).

I am successfully rendering all the object, but I got some big issues with textures.

This is my texture: (512x512)

enter image description here

I'd like to use it on my object, but this is what happens:enter image description here

I can't figure how to display not stretched nicely looking grid in 1:1 ratio.

I think i need to calculate the repeats somehow. Any idea?

This is how im setting up the texture:

var texture = THREE.ImageUtils.loadTexture(basePath +'/images/textures/dt.jpg', new         THREE.UVMapping());texture.wrapT = THREE.RepeatWrapping;texture.wrapS = THREE.RepeatWrapping;texture.repeat.set(1,1);stairmaterials[0] = new THREE.MeshBasicMaterial(    {        side: THREE.DoubleSide,        map: texture    });

I tried to change repeat values to achieve 1:1 not stretched ration, but I wasn't successful at all. I all got worse and worse.

I also use following algorithm to calculate vertex UVS:

geom.computeBoundingBox();var max = geom.boundingBox.max;var min = geom.boundingBox.min;var offset = new THREE.Vector2(0 - min.x, 0 - min.z);var range = new THREE.Vector2(max.x - min.x, max.z - min.z);geom.faceVertexUvs[0] = [];var faces = geom.faces;for (i = 0; i < geom.faces.length; i++) {    var v1 = geom.vertices[faces[i].a];    var v2 = geom.vertices[faces[i].b];    var v3 = geom.vertices[faces[i].c];    geom.faceVertexUvs[0].push([        new THREE.Vector2(( v1.x + offset.x ) / range.x, ( v1.z + offset.z ) / range.z),        new THREE.Vector2(( v2.x + offset.x ) / range.x, ( v2.z + offset.z ) / range.z),        new THREE.Vector2(( v3.x + offset.x ) / range.x, ( v3.z + offset.z ) / range.z)    ]);}geom.uvsNeedUpdate = true;

Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images