THREE.js generate UV coordinate

by

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;

More Related Contents:

  1. Three.js/WebGL: Large spheres appear broken at intersection
  2. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  3. Three.js – Width of view
  4. THREE.js : 2xMeshes using same vector as position
  5. How to find the unicode of the subscript alphabet?
  6. Converting World coordinates to Screen coordinates in Three.js using Projection
  7. Transparent background with three.js
  8. Packing different sized circles into rectangle – d3.js
  9. Multiple transparent textures on the same mesh face in Three.js
  10. How to get the absolute position of a vertex in three.js?
  11. How do you save an image from a Three.js canvas?
  12. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  13. Check if polygon is inside a polygon
  14. three.js transparent object occlusion
  15. How to change face color in Three.js
  16. How to implement a constraint solver for 2-D geometry?
  17. How to get the global/world position of a child object?
  18. Orthographic camera and selecting objects with raycast
  19. catch the click event on a specific mesh in the renderer
  20. Three.JS wireframe material – all polygons vs. just edges
  21. How to draw a blurry circle on HTML5 canvas?
  22. How can I calculate the area of a bezier curve?
  23. Determine if a mesh is visible on the viewport according to current camera
  24. Three.js add an object to a group but keep global position/rotation/scale as it was
  25. How to calculate rotation angle from rectangle points?
  26. Random Point on a given Sphere
  27. How to flip a Three.js texture horizontally
  28. Why do shaders have to be in html file for webgl program?
  29. How to toggle preserveDrawingBuffer in three.js?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment