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

【问题标题】：ThreeJS - Project texture onto mesh surfaceThreeJS - 将纹理投影到网格表面
【发布时间】：2019-01-14 00:14:31
【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

标签： javascript three.js map-projections

【解决方案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 中找到。

【讨论】：