深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

Posted Three中文社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入理解Three.js(WebGL)贴图(纹理映射)和UV映射相关的知识,希望对你有一定的参考价值。

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

本文的在线演示结果和代码请点击这里:Three.js贴图实例

什么是贴图(Texture Mapping)

贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法。 这使我们能够添加表面细节,而无需将这些细节建模到我们的3D对象中,从而大大精简3D模型的多边形边数,提高模型渲染性能。

开始吧

这里方便起见,我们使用踏得网在线开发工具来一步步边学边操作。 请点击新建作品,在第三方库中选择Three.js 80版本,这将自动加载对应版本的Three.js开发库(注:你也可以直接把拷贝到html代码面板中去)。

首先我们创建一个立方体,在javascript面板中编写代码如下:

 
   
   
 
  1. var camera;

  2. var scene;

  3. var renderer;

  4. var mesh;

  5. init();

  6. animate();

  7. function init() {

  8.    scene = new THREE.Scene();

  9.    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);

  10.    var light = new THREE.DirectionalLight( 0xffffff );

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

  12.    scene.add(light);

  13.    var geometry = new THREE.CubeGeometry( 10, 10, 10);

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

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

  16.    mesh.position.z = -50;

  17.    scene.add( mesh );

  18.    renderer = new THREE.WebGLRenderer();

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

  20.    document.body.appendChild( renderer.domElement );

  21.    window.addEventListener( 'resize', onWindowResize, false );

  22.    render();

  23. }

  24. function animate() {

  25.    mesh.rotation.x += .04;

  26.    mesh.rotation.y += .02;

  27.    render();

  28.    requestAnimationFrame( animate );

  29. }

  30. function render() {

  31.    renderer.render( scene, camera );

  32. }

  33. function onWindowResize() {

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

  35.    camera.updateProjectionMatrix();

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

  37.    render();

  38. }

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

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

深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

为此我们需要一张箱子表面的图像,并用这张图像映射到立方体对象的材料中去,这里我们直接使用在线图片http://wow.techbrood.com/uploads/1702/crate.jpg

深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

JS代码中修改之前的材料(material)创建代码:

 
   
   
 
  1. var material = new THREE.MeshPhongMaterial({

  2.    ambient: 0x050505,

  3.    color: 0x0033ff,

  4.    specular: 0x555555,

  5.    shininess: 30

  6. });

为使用贴图:

 
   
   
 
  1. var material = new THREE.MeshPhongMaterial({

  2.    map: THREE.ImageUtils.loadTexture('http://wow.techbrood.com/uploads/1702/crate.jpg')

  3. });

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

在构造我们的材质时,我们指定了texture属性并将其值设置为木箱图像,Three.js然后会加载纹理图像并映射到立方体各个面上。 那么,问题是如果我们想给不同的面添加不同的纹理贴图,该怎么办呢?

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

深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

相应的,我们把材料构造代码修改为:

 
   
   
 
  1. var material1 = new THREE.MeshPhongMaterial({

  2.    map: THREE.ImageUtils.loadTexture('/uploads/1702/crate.jpg')

  3. });

  4. var material2 = new THREE.MeshPhongMaterial({

  5.    map: THREE.ImageUtils.loadTexture('/uploads/1702/bricks.jpg')

  6. });

  7. var material3 = new THREE.MeshPhongMaterial({

  8.    map: THREE.ImageUtils.loadTexture('/uploads/1702/clouds.jpg')

  9. });

  10. var material4 = new THREE.MeshPhongMaterial({

  11.    map: THREE.ImageUtils.loadTexture('/uploads/1702/stone-wall.jpg')

  12. });

  13. var material5 = new THREE.MeshPhongMaterial({

  14.    map: THREE.ImageUtils.loadTexture('/uploads/1702/water.jpg')

  15. });

  16. var material6 = new THREE.MeshPhongMaterial({

  17.    map: THREE.ImageUtils.loadTexture('/uploads/1702/wood-floor.jpg')

  18. });

  19. var materials = [material1, material2, material3, material4, material5, material6];

  20. 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

深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

修改如下代码:

 
   
   
 
  1. var material1 = new THREE.MeshPhongMaterial({

  2.    map: THREE.ImageUtils.loadTexture('images/crate.jpg')

  3. });

  4. var material2 = new THREE.MeshPhongMaterial({

  5.    map: THREE.ImageUtils.loadTexture('images/bricks.jpg')

  6. });

  7. var material3 = new THREE.MeshPhongMaterial({

  8.    map: THREE.ImageUtils.loadTexture('images/clouds.jpg')

  9. });

  10. var material4 = new THREE.MeshPhongMaterial({

  11.    map: THREE.ImageUtils.loadTexture('images/stone-wall.jpg')

  12. });

  13. var material5 = new THREE.MeshPhongMaterial({

  14.    map: THREE.ImageUtils.loadTexture('images/water.jpg')

  15. });

  16. var material6 = new THREE.MeshPhongMaterial({

  17.    map: THREE.ImageUtils.loadTexture('images/wood-floor.jpg')

  18. });

为:

 
   
   
 
  1. var material = new THREE.MeshPhongMaterial({

  2.    map: THREE.ImageUtils.loadTexture('images/texture-atlas.jpg')

  3. });

我们又把代码给改回来使用一张贴图了,接下来我们需要把贴图的不同位置映射到立方体不同的面上去。

首先我们创建贴图的6个子图,在创建完材料的代码后面添加如下几行:

 
   
   
 
  1. var bricks = [new THREE.Vector2(0, .666), new THREE.Vector2(.5, .666), new THREE.Vector2(.5, 1), new THREE.Vector2(0, 1)];

  2. var clouds = [new THREE.Vector2(.5, .666), new THREE.Vector2(1, .666), new THREE.Vector2(1, 1), new THREE.Vector2(.5, 1)];

  3. var crate = [new THREE.Vector2(0, .333), new THREE.Vector2(.5, .333), new THREE.Vector2(.5, .666), new THREE.Vector2(0, .666)];

  4. var stone = [new THREE.Vector2(.5, .333), new THREE.Vector2(1, .333), new THREE.Vector2(1, .666), new THREE.Vector2(.5, .666)];

  5. var water = [new THREE.Vector2(0, 0), new THREE.Vector2(.5, 0), new THREE.Vector2(.5, .333), new THREE.Vector2(0, .333)];

  6. var wood = [new THREE.Vector2(.5, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, .333), new THREE.Vector2(.5, .333)];

上面的代码创建了六个数组,每一个对应于纹理贴图中的每个子图像。每个数组包含4个点,定义子图像的边界。坐标的范围值是0到1,(0,0)表示左下角,(1,1)表示右上角。

子图像的坐标是根据贴图中百分比来定义。比如下面这个砖头子图像:

 
   
   
 
  1. var bricks = [

  2.    new THREE.Vector2(0, .666),

  3.    new THREE.Vector2(.5, .666),

  4.    new THREE.Vector2(.5, 1),

  5.    new THREE.Vector2(0, 1)

  6. ];

在贴图中的位置在左上角(占据横向1/2,竖向1/3的位置),以逆时针方向来定义顶点坐标,从该子图像较低的左下角开始。

左下角: 0 - 最左边 .666 - 底部向上2/3处

右下角: .5 - 中间线 .666 - 底部向上2/3处

右上角: .5 - 中间线 1 - 顶边

右上角: 0 - 最左边 1 - 顶边

定义好子图像后,我们现在需要把它们映射到立方体的各个面上去。首先添加如下代码:

 
   
   
 
  1. geometry.faceVertexUvs[0] = [];

上述代码清除现有的UV映射,接着我们添加如下代码:

 
   
   
 
  1. geometry.faceVertexUvs[0][0] = [bricks[0], bricks[1], bricks[3]];

  2. geometry.faceVertexUvs[0][1] = [bricks[1], bricks[2], bricks[3]];

  3. geometry.faceVertexUvs[0][2] = [clouds[0], clouds[1], clouds[3]];

  4. geometry.faceVertexUvs[0][3] = [clouds[1], clouds[2], clouds[3]];

  5. geometry.faceVertexUvs[0][4] = [crate[0], crate[1], crate[3]];

  6. geometry.faceVertexUvs[0][5] = [crate[1], crate[2], crate[3]];

  7. geometry.faceVertexUvs[0][6] = [stone[0], stone[1], stone[3]];

  8. geometry.faceVertexUvs[0][7] = [stone[1], stone[2], stone[3]];

  9. geometry.faceVertexUvs[0][8] = [water[0], water[1], water[3]];

  10. geometry.faceVertexUvs[0][9] = [water[1], water[2], water[3]];

  11. geometry.faceVertexUvs[0][10] = [wood[0], wood[1], wood[3]];

  12. geometry.faceVertexUvs[0][11] = [wood[1], wood[2], wood[3]];

geometry对象的faceVertexUvs属性包含该geometry各个面的坐标映射。既然我们映射到一个多维数据集,你可能会疑惑为什么数组中有12个面。原因是在ThreeJS模型中,立方体的每个面实际上是由2个三角形组成的。所以我们必须单独映射每个三角形。上述场景中,ThreeJS将为我们加载单一材料贴图,自动分拆成三角形并映射到每个面。

这里要注意每个面的顶点坐标的定义顺序必须遵循逆时针方向。为了映射底部三角形,我们需要使用的顶点指数0,1和3,而要映射顶部三角形,我们需要使用索引1,2,和顶点的3。

最后,我们替换如下代码:

 
   
   
 
  1. var meshFaceMaterial = new THREE.MeshFaceMaterial( materials );

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

为:

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

我们再运行下代码(按[运行]菜单或CTRL+R快捷键),将看到各个面使用不同贴图的旋转立方体。

当然对于复杂的对象,我们还可以在建模的时候建立好模型贴图,并导出为ThreeJS所支持的模型格式,然后在场景中直接加载。

参考: http://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1/

以上是关于深入理解Three.js(WebGL)贴图(纹理映射)和UV映射的主要内容,如果未能解决你的问题,请参考以下文章

webgl 纹理

Three.js-设置环境纹理及加载hdr环境贴图

three.js(11)-纹理贴图

THREE JS 贴图之UV纹理映射

Three.js使用WebGLRenderTarget进行离屏渲染(后期处理)

使用vue学习three.js之加载和使用纹理-设置material.bumpMap属性使用凹凸贴图创建皱纹