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

Question

我成功地将纹理应用到立方体几何图形上：

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);
        });

为什么纹理没有被应用，我只得到了似乎是纹理颜色的平均值？

- Andres

---

你的模型有UV坐标吗？ - 2pha

@2pha 不需要，这是一个STL模型，我需要UV映射吗？ - Andres

没有UV贴图，着色器不知道将图像的哪一部分放在模型的哪个位置。 - 2pha

@2pha 我该如何在Three.js中加载UV贴图？ - Andres

Answer 1

您需要进行UV映射。
您可以在建模软件中编辑模型以添加UV坐标，或者可以像这里发布的答案一样生成它们。
我想另一个选择是创建自己的着色器，将纹理映射到模型表面而不使用UV坐标。

- 2pha

---

有没有办法以编程方式生成UV贴图，就像上面的链接那样，但用于非平面表面？我不在乎纹理有点失真。 - Andres

你需要应用其他类型的投影方法，但这可能不能作为你拥有的所有模型的通用方法。这就是为什么有那么多UV映射软件包可用的原因。 - 2pha