Question

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

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坐标，然后获得球体纹理的纹理像素（像素范围）？

Answer 1

通过更多Google搜索和查看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));

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

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

1 个答案: