为3D模型添加纹理贴图

大家好，欢迎来到IT知识分享网。

本篇文章介绍纹理（Texture Map，也译作纹理映射）的使用，将描述如何使用Three.js给3D对象添加贴图， 贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。

在上篇文章如何实现一个3d场景中的阴影效果（threejs）？创建的3D场景中，我们添加了几个立方体和一个球体，没有使用纹理，三维模型看起来很呆板。

下面我们不同材质的纹理进行渲染：

从网上下载了一个不锈钢材质的图片，.jpg

 var texture = new THREE.TextureLoader().load( "textures/.jpg" ); //立方体 cubeGeometry = new THREE.CubeGeometry(10,10,8); cubeMaterial = new THREE.MeshPhongMaterial({map:texture});

跟上面代码一样接下来再贴上一个木头材质：

 var texture = new THREE.TextureLoader().load( "textures/crate.gif" );

把球体上贴上一个地球的图片，显示成一个地球。

var sphereTexture = new THREE.TextureLoader().load( "textures/land_ocean_ice_cloud_2048.jpg" ); 

另外，立方体的六个面可以采用不同的贴图。

 var loader = new THREE.CubeTextureLoader(); loader.setPath( 'textures/cube/pisa/' ); var textureCube = loader.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );

来看看加上不同的贴图后的效果：

添加贴图后三维场景中的模型看起来生动了很多。