如何从面或 3d 点获取 UV 和纹理坐标？答案

【问题标题】：How to get UV and texture coordinate from a face or 3d point?如何从面或 3d 点获取 UV 和纹理坐标？
【发布时间】：2015-06-23 04:16:04
【问题描述】：

我有一个球体几何体，其基本材质由纹理映射：

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);

鼠标点击：

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);

这给了我一个相交对象的数组。
现在我怎样才能找到相交点的UV坐标，然后得到球体纹理的纹理像素（像素范围）？

【问题讨论】：

标签： three.js uv-mapping

【解决方案1】：

随着更多的谷歌搜索和看到this question，我得到了这个代码，它给了我正确的纹理坐标：

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);

注意： 相机在 (0, 0, 0) 处的球体内，我将比例矩阵应用于球体几何体，如下所示：

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

但我正在寻找更完整的答案，它也适用于没有负比例的几何图形或其他基本几何图形，如平面或立方体。
此代码还为从搅拌机加载的球体返回不准确的纹理 X 坐标。通常，获得正确的 x 坐标对我来说更成问题。我想几何/网格旋转和缩放应该考虑到以获得正确的 x,y 纹理坐标，但我不擅长数学！

【讨论】：