加载图像作为纹理

时间:2014-04-22 22:47:14

标签: javascript three.js textures webgl vertices

当我创建3D对象Three.js时,我可以将图像加载为纹理。

var handGeo = new THREE.CubeGeometry( 100, 100, 15 );
var texture = THREE.ImageUtils.loadTexture('../images/floor.jpg');
var handMat = new THREE.MeshBasicMaterial( {map: texture, color: 0x000000} );
var handMesh = new THREE.Mesh( handGeo, handMat );

但是当我创建对象(立方体)时,添加所有顶点和面并最终合并顶点:

var vertices = [
    new THREE.Vector3(p2.x,p2.y,p1.z),  //C
    new THREE.Vector3(p2.x,p2.y,p2.z),  //G
    new THREE.Vector3(p2.x,p1.y,p1.z),  //D
    new THREE.Vector3(p2.x,p1.y,p2.z),  //H
    new THREE.Vector3(p1.x,p2.y,p2.z),  //F
    new THREE.Vector3(p1.x,p2.y,p1.z),  //B
    new THREE.Vector3(p1.x,p1.y,p2.z),  //E
    new THREE.Vector3(p1.x,p1.y,p1.z)   //A
];

var faces = [
    new THREE.Face3(0,2,1),
    new THREE.Face3(2,3,1),
    new THREE.Face3(4,6,5),
    new THREE.Face3(6,7,5),
    new THREE.Face3(4,5,1),
    new THREE.Face3(5,0,1),
    new THREE.Face3(7,6,2),
    new THREE.Face3(6,3,2),
    new THREE.Face3(5,7,0),
    new THREE.Face3(7,2,0),
    new THREE.Face3(1,3,4),
    new THREE.Face3(3,6,4)
];

var geometry = new THREE.Geometry();
geometry.vertices = vertices;
geometry.faces = faces;
geometry.computeCentroids();
geometry.mergeVertices();
var texture = THREE.ImageUtils.loadTexture('../images/floor.jpg');
var material = new THREE.MeshBasicMaterial( {map: texture, color: 0x000000} );
mesh = new THREE.Mesh(geometry, material);

我收到此错误:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1 

0 个答案:

没有答案