需要实现立方体的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映射。
成品图如下:
免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。