更换GLTF模型的纹理贴图
在Three.js中，GLTF模型的纹理贴图可以通过更换其.map属性来实现。然而，这个过程需要特别注意纹理的坐标和渲染器的设置，以避免颜色偏差和坐标错位。
纹理坐标和渲染器设置
在加载新的纹理时，需要确保纹理的.encoding属性与WebGL渲染器的.outputEncoding属性一致。这样可以避免颜色偏差。
示例代码：加载并设置纹理
javascript
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load('path/to/your/new_texture.png');
texture.encoding = THREE.sRGBEncoding; // 确保与渲染器的outputEncoding一致更换GLTF模型的纹理贴图
要更换GLTF模型的纹理贴图，可以直接将新的纹理对象赋值给模型材质的.map属性。
示例代码：更换纹理贴图
javascript
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
const mesh = gltf.scene.children[0]; // 获取模型的网格
mesh.material.map = texture; // 更换纹理贴图
});纹理坐标的翻转
在Three.js中，纹理坐标的翻转是一个常见的问题。纹理对象的.flipY属性默认为true，这意味着纹理在Y轴方向上会被翻转。然而，GLTF模型的纹理坐标默认不翻转。因此，在更换纹理时，需要特别注意这一点。
示例代码：检查和设置.flipY
javascript
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
const mesh = gltf.scene.children[0]; // 获取模型的网格
console.log('Original .flipY', mesh.material.map.flipY); // 检查原始纹理的.flipY值
// 加载新纹理
const texLoader = new THREE.TextureLoader();
const newTexture = texLoader.load('path/to/your/new_texture.png');
newTexture.encoding = THREE.sRGBEncoding;
newTexture.flipY = false; // 设置新纹理的.flipY值
mesh.material.map = newTexture; // 更换纹理贴图
});完整示例代码
以下是一个完整的示例，展示如何在Three.js中加载GLTF模型，并为其更换纹理贴图。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js GLTF Model Texture Replacement</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new THREE.GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
scene.add(gltf.scene);
const mesh = gltf.scene.children[0]; // 获取模型的网格
console.log('Original .flipY', mesh.material.map.flipY); // 检查原始纹理的.flipY值
// 加载新纹理
const texLoader = new THREE.TextureLoader();
const texture = texLoader.load('path/to/your/new_texture.png');
texture.encoding = THREE.sRGBEncoding;
texture.flipY = false; // 设置新纹理的.flipY值
mesh.material.map = texture; // 更换纹理贴图
camera.position.set(0, 0, 5);
render();
});
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>