Hello, I have developed a basic renderer for my 3D objects that are generated using PHP.
While I am able to successfully render all the objects, I am facing some major issues with textures.
Currently, the texture I am using is sized at 512x512 pixels.
I want to implement this texture onto my object, but the result is not as expected:
I am struggling to display a grid without stretching, maintaining a nice 1:1 ratio.
I believe I need to calculate the repeats in some way. Does anyone have any ideas on how I can achieve this?
This is the code snippet where I set 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 have tried adjusting the repeat values to achieve a non-stretched 1:1 ratio, but unfortunately, I have not been successful. It only made the situation worse.
Additionally, I am utilizing the 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;