本篇文章介绍纹理(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'
] );
来看看加上不同的贴图后的效果:
是不是看起来生动了很多?
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有