如何将纹理应用于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);
        });

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

Answer 1

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