javascript - ThreeJS - 将纹理投影到网格表面

Question

我希望在 ThreeJS 中将纹理投影到网格表面。

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

此链接实现了我正在寻找的结果，但我不确定他们是如何实现的。

.

我会在研究时更新这篇文章，但是如果有人知道如何将 ThreeJS 纹理投影到我很想知道的网格上。

谢谢

Answer 1

您可以在这里找到工作示例:https://jsfiddle.net/mmalex/pcjbysn1/

BufferGeometry 将纹理坐标存储在'uv' 属性中，您可以使用BufferGeometry.addAttribute 添加它。并通过 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));
}

现在您需要做的就是将网格顶点“投影”到某个 3D 平面上。这些投影坐标将显示您的 UV 坐标。

一般情况下，您需要执行 Plane.projectPoint对于每个顶点。这种方法很简单，可以通过预旋转网格进行优化，使顶点 x 和 y 分量相应地变为 u 和 v。你可以在我的 jsfiddle 中找到它。