在计算机图形学的奇幻世界里，我们就像是数字世界的造物主，构建着一个个或宏大或精巧的虚拟场景。当我们创造出一个 3D 模型，比如一座巍峨的城堡、一辆炫酷的跑车，或者一个栩栩如生的角色时，光有形状可不够，还得给它们 "穿" 上漂亮的 "衣裳"，让它们看起来更加真实、生动。而纹理映射，就是我们给 3D 模型赋予华丽外观的神奇魔法！接下来，就让我们深入探索纹理映射中的 UV 映射和立方体贴图这两大 "魔法秘籍"。
一、纹理映射：数字世界的 "美妆师"
想象一下，你刚捏出一个 3D 小人，光秃秃的，像个没有 "皮肤" 的黏土模型。这时，纹理映射就登场了，它能把一张精美的图片 "贴" 到这个 3D 小人身上，让它瞬间拥有细腻的皮肤、逼真的衣物纹理，甚至酷炫的纹身。从本质上来说，纹理映射就是在 3D 模型的表面和二维纹理图像之间建立一种对应关系，就像是给模型的每一个点都找到了在纹理图像上的 "坐标"，告诉计算机 "这个位置该显示纹理图像上的哪一块内容"。
二、UV 映射：为 3D 模型定制 "皮肤模板"
在纹理映射的魔法中，UV 映射是最基础也最重要的一环，它就像是为 3D 模型量身定制的 "皮肤模板"。我们知道，3D 模型是存在于三维空间（X、Y、Z 轴）中的，而纹理图像是二维的（只有 U、V 轴，这里的 U、V 就相当于二维平面上的 X、Y 轴）。UV 映射的任务，就是把 3D 模型表面的每一个点，都精准地对应到二维纹理图像上的一个位置。
这听起来有点抽象，我们打个比方。假设你要给一个纸质的正方体盒子贴上漂亮的包装纸。首先，你得把正方体盒子拆开，平铺在桌面上，这个过程就类似于 UV 映射中的 "展开" 操作。3D 模型的表面经过 "展开" 后，就变成了一张二维的 "平面图纸"，图纸上的每一个点都对应着 3D 模型上的一个位置，而这个 "平面图纸" 上的坐标，就是我们所说的 UV 坐标。
在 JavaScript 中，我们可以借助 Three.js 库来实现简单的 UV 映射效果。首先，引入 Three.js 库：
xml
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>然后，创建一个简单的场景、相机和渲染器：
ini
// 创建场景
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 geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个纹理加载器
const textureLoader = new THREE.TextureLoader();
// 加载一张纹理图片
const texture = textureLoader.load('your_texture_image.jpg');
// 创建一个材质，并应用纹理
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建一个网格对象，将几何体和材质组合起来
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 设置相机位置
camera.position.z = 5;
// 渲染函数
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();在上述代码中，Three.js 库会自动帮我们处理 UV 映射的一些底层细节，将纹理图片 "贴" 到立方体上。但在更复杂的场景中，我们可能需要手动调整 UV 坐标，以达到更精确的纹理映射效果。比如，当我们想要让纹理在模型上呈现出拉伸、扭曲等特殊效果时，就可以通过修改几何体的uv属性来实现。
三、立方体贴图：打造 360 度环绕的 "沉浸式背景"
UV 映射能让 3D 模型拥有漂亮的 "皮肤"，而立方体贴图则像是给 3D 世界打造了一个 360 度环绕的 "沉浸式背景"。想象一下，你身处一个虚拟的房间，抬头能看到天花板上精美的图案，低头能看到地板的纹理，四周的墙壁也有着逼真的装饰。立方体贴图就能实现这样的效果，它通过六张二维纹理图像（分别对应立方体的六个面：上、下、左、右、前、后），构建出一个包围场景的 "立方体环境"。
在实际应用中，立方体贴图常用于模拟反射和折射效果。比如，我们要制作一个闪亮的金属球，就可以利用立方体贴图来模拟周围环境在金属球表面的反射。就好像金属球是一面镜子，把周围的景象都 "照" 了进来，让它看起来更加真实、有质感。
在 JavaScript 中，同样可以使用 Three.js 来实现立方体贴图效果。首先，准备六张纹理图片，分别命名为px.jpg（正 X 面）、nx.jpg（负 X 面）、py.jpg（正 Y 面）、ny.jpg（负 Y 面）、pz.jpg（正 Z 面）、nz.jpg（负 Z 面）。然后，编写代码：
ini
// 创建场景
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 geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个立方体贴图加载器
const cubeTextureLoader = new THREE.CubeTextureLoader();
// 加载六张纹理图片
const cubeTexture = cubeTextureLoader.load([
'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'
]);
// 创建一个材质，并应用立方体贴图
const material = new THREE.MeshBasicMaterial({ envMap: cubeTexture });
// 创建一个网格对象，将几何体和材质组合起来
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 设置相机位置
camera.position.z = 5;
// 渲染函数
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();通过上述代码，我们就为立方体应用了立方体贴图，让它仿佛置身于一个由六张纹理图片构建的环境之中。
四、结语：解锁更多纹理映射的魔法
纹理映射中的 UV 映射和立方体贴图，只是计算机图形学这座宝库中的冰山一角。它们就像是两把神奇的钥匙，为我们打开了通往更加真实、绚丽的 3D 世界的大门。随着技术的不断发展，纹理映射还有许多高级技巧和应用等待我们去探索，比如法线贴图、位移贴图等，它们能让 3D 模型呈现出更加细腻、复杂的表面细节。希望你能在这片充满无限可能的数字天地中，尽情施展纹理映射的魔法，创造出令人惊叹的 3D 作品！
上述文章结合底层原理、幽默表达与 JS 实践，希望能让你掌握纹理映射知识。若你觉得哪里需要补充，或想换个风格，随时告诉我。