如何将纹理应用于 Three.js 中的自定义几何图形 [英] How to apply a texture to a custom geometry in Three.js

问题描述

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

I successfully applied a texture to a cube geometry with this:

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

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

With this I get a nice textured cube like this:

现在我想将相同的纹理(512x512 jpg 图像)应用于我从 STL 加载的自定义模型，这就是我得到的(在这种情况下是金字塔):

Now I want to apply the same texture (512x512 jpg image) to a custom model I'm loading from an STL and this is what I get (in this case a pyramid):

这是代码:

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

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

Why the texture is not being applied and I get only what seems to be an average of the texture colors?

推荐答案

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

You need UV mapping.
You can either edit the model in modelling software to add UV coordinates or maybe generate them as in the answers posted here.
I suppose another option would be to create your own shader that maps the texture to the model surface without using UV coordinates.

这篇关于如何将纹理应用于 Three.js 中的自定义几何图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！