为3D模型添加纹理贴图
本篇文章介绍纹理（Texture Map，也译作纹理映射）的使用，将描述如何使用Three.js给3D对象添加贴图， 贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。
在上篇文章3D场景中物体模型选中和碰撞检测的实现创建的3D场景中，我们添加了几个立方体和一个球体，没有使用纹理，三维模型看起来很呆板。
下面我们不同材质的纹理进行渲染：
从网上下载了一个不锈钢材质的图片，93653412.jpg
var texture = new THREE.TextureLoader().load( "textures/93653412.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'
] );来看看加上不同的贴图后的效果：
是不是看起来生动了很多？
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-07-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读