深入理解Three.js（WebGL）贴图（纹理映射）和UV映射-白红宇

深入理解Three.js（WebGL）贴图（纹理映射）和UV映射

阅读量：5954 次

发布时间：2019-06-19

本文共 7605 字，大约阅读时间需要 25 分钟。

本文将详细描述如何使用Three.js给3D对象添加贴图（Texture Map，也译作纹理映射，“贴图”的翻译要更直观，而“纹理映射”更准确。）。为了能够查看在线演示效果，你需要有一个兼容WebGL的现代浏览器（最好是Chrome/FireFox/Safari/Edge/IE11+）。

本文的在线演示结果和代码请点击这里：。

什么是贴图（Texture Mapping）

贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。

这使我们能够添加表面细节，而无需将这些细节建模到我们的3D对象中，从而大大精简3D模型的多边形边数，提高模型渲染性能。

开始吧

这里方便起见，我们使用踏得网在线开发工具来一步步边学边操作。

请点击，在第三方库中选择Three.js 80版本，这将自动加载对应版本的Three.js开发库（注：你也可以直接把<script src="http://wow.techbrood.com/libs/three.r73.js"></script>拷贝到HTML代码面板中去）。

首先我们创建一个立方体，在JavaScript面板中编写代码如下：

var

camera;

var

scene;

var

renderer;

var

mesh;

init();

animate();

function

init() {

scene =

new

THREE.Scene();

camera =

new

THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);

var

light =

new

THREE.DirectionalLight( 0xffffff );

light.position.set( 0, 1, 1 ).normalize();

scene.add(light);

var

geometry =

new

THREE.CubeGeometry( 10, 10, 10);

var

material =

new

THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

mesh =

new

THREE.Mesh(geometry, material );

mesh.position.z = -50;

scene.add( mesh );

renderer =

new

THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

window.addEventListener(

'resize'

, onWindowResize,

false

);

render();

}

function

animate() {

mesh.rotation.x += .04;

mesh.rotation.y += .02;

render();

requestAnimationFrame( animate );

}

function

render() {

renderer.render( scene, camera );

}

function

onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

render();

}

点击菜单栏中的[运行]菜单（），或者按快捷键：CTRL+R，来运行该代码，你将看到一个旋转的蓝色立方体：

我们接下来要做的就是把这个立方体变成一个游戏里常见的木箱子，如下图所示：

为此我们需要一张箱子表面的图像，并用这张图像映射到立方体对象的材料中去，

这里我们直接使用在线图片http://wow.techbrood.com/uploads/1702/crate.jpg.

JS代码中修改之前的材料（material）创建代码:

1	`var` `material =` `new` `THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );`

为使用贴图:

1	`var` `material =` `new` `THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture(` `'http://wow.techbrood.com/uploads/1702/crate.jpg'` `) } );`

再运行下（按[运行]菜单或CTRL+R快捷键），你会看到一个旋转的板条箱，而不是一个普通的蓝色立方体。

在构造我们的材质时，我们指定了texture属性并将其值设置为木箱图像，Three.js然后会加载纹理图像并映射到立方体各个面上。

那么，问题是如果我们想给不同的面添加不同的纹理贴图，该怎么办呢？

一种方法是使用材料数组，我们创建6个新材料，每一个使用不同的纹理贴图：bricks.jpg，clouds.jpg，stone-wall.jpg，water.jpg，wood-floor.jpg以及上面的crate.jpg。

相应的，我们把材料构造代码修改为：

                            
var
material1 = 
new
THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture(
'/uploads/1702/crate.jpg'
) } );
var
material2 = 
new
THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture(
'/uploads/1702/bricks.jpg'
) } );
var
material3 = 
new
THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture(
'/uploads/1702/clouds.jpg'
) } );
var
material4 = 
new
THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture(
'/uploads/1702/stone-wall.jpg'
) } );
var
material5 = 
new
THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture(
'/uploads/1702/water.jpg'
) } );
var
material6 = 
new
THREE.MeshPhongMaterial( { 
map: THREE.ImageUtils.loadTexture(
'/uploads/1702/wood-floor.jpg'
) } );
var
materials = [material1, material2, material3, material4, material5, material6];
var
meshFaceMaterial = 
new
THREE.MeshFaceMaterial( materials );
         
       

上述代码，我们先分别创建了6个材料，组成了一个材料数组，并使用这个数组创建一个MeshFaceMaterial对象。

最后，我们需要告诉我们的3D模型来使用这个新的组合“面材料”，修改下面的代码：

1	`mesh =` `new` `THREE.Mesh(geometry, material );`

为：

1	`mesh =` `new` `THREE.Mesh(geometry, meshFaceMaterial);`

再运行下（按[运行]菜单或CTRL+R快捷键），你就将看到立方体的各个表面使用了不同的贴图。

这很酷，Three.js会自动把数组中的这些材料应用到不同的面上去。

但问题又来了，随着3D模型的面的增长，为每个面创建贴图是不现实的。

这就是为什么我们需要另外一种更为普遍的解决方法：UV映射的原因。

UV映射（UV Mapping）

UV映射最典型的例子就是把一张地图映射到3D球体的地球仪上去。其本质上就是把平面图像的不同区块映射到3D模型的不同面上去。我们把之前的6张图拼装成如下的一张图：http://wow.techbrood.com/uploads/160801/texture-atlas.jpg.

修改如下代码：

var

material1 =

new