三个JS纹理没有显示

Question

我正在尝试使用Three JS将纹理应用于我的3D模型。 我从三个JS示例中尝试了很多方法，但由于任何原因，没有任何效果。

以下是我将纹理应用于模型的方法：

//LOADING TEXTURE
var textureLoader = new THREE.TextureLoader();
var diffuse = textureLoader.load( "models/Carbon.png" );
diffuse.encoding = THREE.sRGBEncoding;
diffuse.wrapS = THREE.RepeatWrapping;
diffuse.wrapT = THREE.RepeatWrapping;
diffuse.repeat.x = 1;
diffuse.repeat.y = 1;
var normalMap = textureLoader.load( "models/Carbon_Normal.png" );
normalMap.wrapS = THREE.RepeatWrapping;
normalMap.wrapT = THREE.RepeatWrapping;

var material = new THREE.MeshPhysicalMaterial({
roughness: 0.5,
clearcoat: 1.0,
clearcoatRoughness: 0.1,
map: diffuse,
normalMap: normalMap
});
// LOADING MODEL
var loader = new THREE.GLTFLoader();
loader.load("models/stairs.gltf", function(gltf){
model = gltf.scene
model.traverse((newModel) => {
if (newModel.isMesh){
newModel.material = material;
newModel.castShadow = true;
newModel.receiveShadow = true;
}
});
scene.add(model);
});

我感谢任何帮助！

Answer 1

加载glTF模型的纹理时，必须将Texture.flipY设置为false以满足glTF的 UV 约定。

diffuse.flipY = false;
normalMap.flipY = false;

此外，您始终必须确保模型具有纹理坐标。您可以通过检查网格的几何形状是否具有uv属性来执行此操作。如果缺少此属性，我建议您在 DCC 工具(如 Blender(中生成纹理坐标。

three.js R112