ThreeJS - Project texture onto mesh surface

user_6355509 0
Viewed 2192

I'm looking to project a texture onto the surface of a mesh in ThreeJS.

https://www.lanyardmarket.com/en/printed-tshirt

This link achieves the result i'm looking for however i'm not sure how they achieved it.

.

I'll update this post as I research however if anyone knows how to project a ThreeJS texture onto a mesh i'd love to know.

Thanks

map-projections three.js javascript
1 Answers

Working example you may find here: https://jsfiddle.net/mmalex/pcjbysn1/

threejs box texture UV coordinates mapping

BufferGeometry stores texture coordinates in 'uv' attribute, you can add it with BufferGeometry.addAttribute and access it through geom.attributes.uv.array.

let uvcoords = [];
let vertexCount = geom.attributes.position.array.length / 3;

// allocate array of UV coordinates (2 floats per each vertex)
uvcoords.length = 2 * vertCount;

if (geom.attributes.uv === undefined) {
    geom.addAttribute('uv', new THREE.Float32BufferAttribute(uvcoords, 2));
}

Now all you need is to "project" mesh vertices onto some 3D plane. These projection coordinates will appear your UV coordinates.

Projecting mesh vertices on texture UV space (generate uv coordinates)

In general case, you would need to do Plane.projectPoint for each vertex. This approach is straightforward and can be optimized with pre-rotating the mesh so that vertex x and y components become u and v accordingly. This you will find in my jsfiddle.

user_87422870
Related