Question

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

.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

您需要在以下代码中推送array。确保UVs正确映射到顶点。

geometry.faceVertexUvs[ 0 ].push( [ new THREE.Vector2( 1, 0 ), new THREE.Vector2( 1, 1 ), new THREE.Vector2( 0, 1 ) ] );
mesh.doubleSided已替换为material.side = THREE.DoubleSide。请务必从官方的three.js示例中学习，并避免使用网上的旧例子。
纹理加载是异步的，您可能只渲染一次，可能在纹理加载之前。添加动画循环。

three.js r.60

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

1 个答案: