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