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

Question

我正在寻找将纹理投影到 ThreeJS 中的网格表面上。

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

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

.

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

谢谢

标签： javascriptthree.jsmap-projections

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 中找到。