1

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

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

4

1 回答 1

1

通过更多的谷歌搜索并看到这个问题，我得到了这段代码，它给了我正确的纹理坐标：

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 纹理坐标，但我不擅长数学！

于 2015-04-17T09:00:47.277 回答