如何在 Three.js 中将纹理应用于自定义几何体答案

【问题标题】：How to apply a texture to a custom geometry in Three.js如何在 Three.js 中将纹理应用于自定义几何体
【发布时间】：2016-04-28 05:39:54
【问题描述】：

我成功地将纹理应用于立方体几何体：

var geometry = new THREE.CubeGeometry(10, 10, 10);
var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
meshMaterial.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, meshMaterial);

有了这个，我得到了一个像这样的漂亮纹理立方体：

现在我想将相同的纹理（512x512 jpg 图像）应用于我从 STL 加载的自定义模型，这就是我得到的（在本例中为金字塔）：

这是代码：

loader.load(jsonParam.url, function (geometry) {
            var meshMaterial = new THREE.MeshPhongMaterial({ transparent: false, map: THREE.ImageUtils.loadTexture('/app/images/wood.jpg') });
            meshMaterial.side = THREE.DoubleSide;

            var mesh = new THREE.Mesh(geometry, meshMaterial);

            mesh.castShadow = false;
            mesh.receiveShadow = true;
            scene.add(mesh);
        });

为什么没有应用纹理，而我只得到纹理颜色的平均值？

【问题讨论】：

你的模型有 UV 坐标吗？
@2pha 不，它是 STL 模型，我需要 UV 映射吗？
是的。如果没有 UV 贴图，着色器不知道图像的哪一部分应该放在模型的哪个位置。
@2pha 如何在 Three.js 中加载 UV 贴图？

标签： three.js texture-mapping

【解决方案1】：

您需要 UV 映射。
您可以在建模软件中编辑模型以添加 UV 坐标，也可以按照 here 发布的答案生成它们。
我想另一种选择是创建自己的着色器，将纹理映射到模型表面，而不使用 UV 坐标。

【讨论】：

有没有办法像上面的链接一样以编程方式生成 UV 贴图，但对于非平面表面？我不在乎纹理是否有点扭曲
您必须应用一些其他类型的projection method，但这可能不能用作您拥有的所有模型的通用方法。这就是为什么有这么多 UV 映射软件包可用的原因。