THREE.js generate UV coordinate

Question

I am working on importing a model into a scene using the THREE.js OBJ loader.

I know that I am able to import the geometry fine, because when I assign a MeshNormalMaterial to it, it shows up great. However, if I use anything that requires UV coordinates, It gives me the error:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1  

I know this is because the loaded OBJ has no UV coordinates, but I was wondering if there was any way to generate the needed texture coordinates. I have tried

material.needsUpdate = true; geometry.uvsNeedUpdate = true; geometry.buffersNeedUpdate = true; 

...but to no avail.

Is there any way to automagically generate UV textures using three.js, or do I have to assign the coordinates myself?

Answer 1

To my knowledge there is no automatic way to calculate UV.

You must calculate yourself. Calculate a UV for a plane is quite easy, this site explains how: calculating texture coordinates

For a complex shape, I don't know how. Maybe you could detect planar surface.

EDIT

Here is a sample code for a planar surface (x, y, z) where z = 0:

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