three.js利用顶点信息及faceVertexUvs为立方体的每个面贴图

通过以上方法才可以利用UV为Mesh添加纹理

利用以下代码可以为不同面贴上不同的纹理,也可以修改为所有面共用一个纹理

point//顶点
pointindex//顶点索引
var cubeGeometry = new THREE.Geometry();
var verticesOfCube = point;
var indicesOfFaces = pointindex;
cubeGeometry.vertices = verticesOfCube;
cubeGeometry.faces = indicesOfFaces;
cubeGeometry.computeFaceNormals();

//给立方体设置贴图
var materials = [];  //创建一个贴图数组
//设置贴图数组
for(var i = 0;i < cubeGeometry.faces.length/2;i++){
    materials[i] = new THREE.MeshBasicMaterial({
    map:THREE.ImageUtils.loadTexture('../threejs/img/' + (i+1) + '.png',
        {},function(){
             renderer.render(scene,camera);
             })
          })
       }
var faceId = 0;
var uv = [new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1), new THREE.Vector2(0, 1)];
//设置纹理坐标
for (var m = 0; m < cubeGeometry.faces.length; m += 2) {
	cubeGeometry.faces[m].materialIndex = faceId;
	cubeGeometry.faces[m + 1].materialIndex = faceId;
	cubeGeometry.faceVertexUvs[0][m] = [uv[2], uv[3], uv[0]];
	cubeGeometry.faceVertexUvs[0][m + 1] = [uv[2], uv[0], uv[1]];
	faceId++;
}
var cubeMaterial = new THREE.MeshFaceMaterial(materials);
cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
scene.add(cube);

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要给一个立方体的6个贴不同的纹理,需要首先创建一个立方体模型,并为每个分配一个唯一的纹理坐标。在OpenGL中,可以使用glTexCoord2f函数为每个顶点指定纹理坐标。该函数需要两个参数,即s和t,用于指定纹理的横向和纵向坐标。 假设有6个纹理a、b、c、d、e和f,每个纹理都有自己的编号,可以通过glBindTexture函数将纹理与纹理编号绑定。然后,为了在立方体上贴上不同的纹理,需要按照以下步骤操作: 1. 在立方体模型上的每个上定义唯一的纹理坐标。可以使用glTexCoord2f函数为每个顶点指定纹理坐标,其中s和t的值应在0到1之间,对应于纹理的宽度和高度。 2. 通常情况下,每个立方体被分配一个唯一的顶点序列。使用glBegin和glEnd函数指定绘制模型的类型(如GL_TRIANGLES或GL_QUADS),然后使用glVertex3f函数指定每个顶点的xyz坐标。 3. 在使用glVertex3f函数定义每个顶点时,也可以使用glTexCoord2f函数为每个顶点指定纹理坐标。 4. 在渲染模型的过程中,根据每个顶点的纹理坐标自动插值生成纹理。 5. 在绘制立方体之前,需要分别绑定6个不同的纹理。可以使用glBindTexture函数按顺序绑定每个纹理,然后使用glTexImage2D函数将每个纹理加载到OpenGL中。 6. 使用glDrawArrays或glDrawElements函数绘制立方体模型。在渲染过程中,OpenGL会按照每个的纹理坐标自动插值渲染每个像素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值