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

How to apply textures to a custom geometry

本文关键字：自定义 几何体 应用于 纹理      更新时间：2023-09-26

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

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

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

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

  2. CCD_ 3已被CCD_。请务必学习官方的three.js示例，并避免网络上的旧示例。

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

three.js r.60

相关文章：