javascript - 如何将纹理应用于自定义几何体

Question

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

.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);

Answer 1

1. 您需要在以下代码中压入一个数组。确保 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. 纹理加载是异步的，您只渲染一次，很可能在纹理加载之前。添加动画循环。

three.js r.60