2

我是一个非常绿色的新手，试图了解纹理和几何形状。下面的代码应该渲染三角形并将图像应用为纹理。但是，我收到以下错误：

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

有任何想法吗？

var scene = new THREE.Scene(),
    geometry = new THREE.Geometry();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
    renderer = new THREE.WebGLRenderer();

geometry.vertices.push(new THREE.Vector3(-1, -1, 0));
geometry.vertices.push(new THREE.Vector3(-1, 1, 0));
geometry.vertices.push(new THREE.Vector3(1, -1, 0));

geometry.faces.push( new THREE.Face3(0, 2, 1)); 

geometry.faceVertexUvs[ 0 ].push(
    THREE.Vector2( 0, 1),
    THREE.Vector2( 1, 1),
    THREE.Vector2( 1, 0)
);


geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.computeVertexNormals();

var material = new THREE.MeshBasicMaterial({
    //color: 0xFF0000, 
    //wireframe: true,
    map : THREE.ImageUtils.loadTexture('cheese2.231104333_std.jpg')
});

var shape = new THREE.Mesh(geometry, material);
shape.doubleSided = true;
shape.overdraw = true;

scene.add(shape);

camera.position.z = 10;
renderer.setClearColorHex(0x00000, 1);
renderer.setSize( window.innerWidth, window.innerHeight);

renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
4

1 回答 1

1

  1. 您需要array在以下代码中推送一个。确保 UV 正确映射到您的顶点。

    geometry.faceVertexUvs[ 0 ].push( [ new THREE.Vector2( 1, 0 ), new THREE.Vector2( 1, 1 ), new THREE.Vector2( 0, 1 ) ] );

  2. mesh.doubleSided已替换为material.side = THREE.DoubleSide。一定要学习官方的three.js例子，避免网络上的老例子。

  3. 纹理加载是异步的，您只渲染一次，可能在纹理加载之前。添加动画循环。

三.js r.60

于 2013-08-24T16:52:15.083 回答