这篇文章将演示如何给 gltf 的网格模型 Mesh 更换颜色贴图.map

加载颜色贴图.map

注意单独加载的纹理贴图的.encoding 和 webgl 渲染器的.outputEncoding 保持一致

const texLoader = new THREE.TextureLoader();
const texture = texLoader.load('./黑色.png'); // 加载手机mesh另一个颜色贴图
texture.encoding = THREE.sRGBEncoding; // 和渲染器.outputEncoding一样值

更换 gltf 颜色贴图

执行 mesh.material.map = texture;新的纹理对象 Texture 赋值给.material.map 就可以更换材质贴图

loader.load('../手机模型.glb', function (gltf) {
  const mesh = gltf.scene.children[0]; // 获取Mesh
  mesh.material.map = texture; // 更换不同风格的颜色贴图
});

注意：如果你直接给 gltf 模型材质设置.map 属性更换贴图,会出现纹理贴图错位的问题,这主要和纹理对象 Texture 的翻转属性.flipY 有关

纹理对象 Texture 翻转属性.flipY 的默认值

.flipY 表示是否翻转纹理贴图在 Mesh 上的显示位置

纹理对象 Texture 翻转属性.flipY 默认值是 true

// 纹理对象texture.flipY默认值
console.log('texture.flipY', texture.flipY); // true

gltf 的贴图翻转属性.flipY 的默认值

gltf 的贴图翻转属性.flipY 默认值是 false

loader.load('../手机模型.glb', function (gltf) {
  const mesh = gltf.scene.children[0]; //获取Mesh
  console.log('.flipY', mesh.material.map.flipY); // false
});

如果更换单独加载的纹理贴图，比如颜色贴图.map,注意把纹理贴图.flipY 的值设置给 gltf 中纹理的值 false

//是否翻转纹理贴图
texture.flipY = false;

效果

完整代码

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const group = new THREE.Group();

// 1.实例化一个加载器
const loader = new GLTFLoader();

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./黑色.png');
texture.flipY = false; //是否翻转纹理贴图

// 2.加载gltf模型
loader.load('./手机模型.glb', (gltf) => {
  group.add(gltf.scene);

  gltf.scene.children[0].material.map = texture;
  console.log(gltf);
});

export default group;