好库网 好库网首页 | 我的好库
three.js

Threejs中贴图UV映射的小结

发布者:threejs
发布日期:2020-10-23 15:12:00   更新日期:2020-10-23 15:15:00
阅读次数:215
评分:4.80
介绍:本文是对使用Three.js给3D对象添加贴图和UV映射的小结
正文:

需要实现立方体的6个面,对应大图片的6个位置的小图。

大图如下:

 

将大图按坐标分成6个小图,大图的坐标系是0-1的值,左下角坐标是(0,0),右上角坐标是(1,1),如下图所示:

 

以img0图片为例:

0,1,2,3四个角坐标的位置,分别是 (0,0),(0.5,0),(0.5,1/3),(0,1/3) 

 

 

代码为:

var img0 = [new THREE.Vector2(0, 0), new THREE.Vector2(0.5, 0), new THREE.Vector2(0.5, 1/3), new THREE.Vector2(0, 1/3)];

 

立方体的每个面是由两个三角形(face面)组成,如img0由face0和face1组成,如下图所示:

 

UV映射需要定义face三角形的坐标。

例如img0的两个face组成,

第一个face0对应坐标的索引值为0,1,3。

第二个face1对应坐标的索引值为1,2,3。

代码如下:

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

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

 

这样以此类推,就完成了UV映射。

 

成品图如下:


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。