CODEWITHSUNDEEP
three.jsuv-mapping
Mehdi Seifi
Mehdi Seifi

Reputation: 516

How to get UV and texture coordinate from a face or 3d point?

I have a sphere geometry with a basic material which mapped by a texture:

var geometry = new THREE.SphereGeometry(500, 60, 40);
var material = new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture('textures/equirectangular.jpg'),
    overdraw: 0.5
});
var mesh = new THREE.Mesh(geometry, material);

And on mouse click:

mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(mesh);

Which gives me an array of intersected objects.
Now how can i find the UV coordinate out of the intersected point and then get the texture pixel(pixels range) of the sphere texture?

Upvotes: 1

Views: 2323

Answers (1)

Mehdi Seifi
Mehdi Seifi

Reputation: 516

With more googling and seeing this question, i've got this code which gives me the right texture coordinate:

var p = intersects[0].point;
var x = (p.x - sphere.position.x) / (-1 * radius);
var y = (p.y - sphere.position.y) / radius;
var z = (p.z - sphere.position.z) / radius;

var u = 1 - (Math.atan2(z, x) / (2 * Math.PI) + 0.5);
var v = 1 - ((Math.asin(y) / Math.PI) + 0.5);
console.log("u,v:", u, v);

var x = u * textureWidth;
var y = v * textureHeight;
console.log(x, y);

Note: camera is inside the sphere at (0, 0, 0) and i apply a scale matrix to the sphere geometry like this:

geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

But i'm looking for more complete answer which applies for geometry without negative scale too or other basic geometries like plane or cube.
Also this code returns inaccurate texture X coordinates for a loaded sphere from blender. generally getting the right x coordinates is more problematic for me. i guess the geometry/mesh rotation and scale should take into account in order to get right x,y texture coordinates, but i'm not good at math!

Upvotes: 1

Related Questions