javascript - Three.js 着色器在单个自定义几何网格面上无法正确显示

Question

我在 Three.js 中有一个单面网格，我想对其应用着色器。

当我在网格上应用着色器 Material 时，它似乎正在读取着色器的单个像素并将该值应用于整个面。我在以下示例中对此进行测试: https://threejs.org/examples/?q=shader#webgl_shader2

每个着色器示例中都添加了单个面网格，所有示例都存在相同的问题。

// how geometry is defined (right after BoxGeometry in example)
let triangleGeometry = new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3( 0.0, 1.0, 0.0 ));
triangleGeometry.vertices.push(new THREE.Vector3( -1.0, -1.0, 0.0 ));
triangleGeometry.vertices.push(new THREE.Vector3( 1.0, -1.0, 0.0 ));
triangleGeometry.faces.push(new THREE.Face3( 0, 1, 2 ));

// how mesh is defined (right after box mesh in example)
let triangleMesh = new THREE.Mesh( triangleGeometry, material );
triangleMesh.position.x = i - ( params.length - 1 ) / 2;
triangleMesh.position.y = i % 2 - 0.5;
scene.add( triangleMesh );

我已经在我能找到的每个示例上尝试过此操作，并且遇到了相同的问题。我想知道我没有看到什么。

Answer 1

这有效:

geometry.computeBoundingBox();

var max = geometry.boundingBox.max,
    min = geometry.boundingBox.min;
var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
var faces = geometry.faces;

geometry.faceVertexUvs[0] = [];

for (var i = 0; i < faces.length ; i++) {

    var v1 = geometry.vertices[faces[i].a], 
        v2 = geometry.vertices[faces[i].b], 
        v3 = geometry.vertices[faces[i].c];

    geometry.faceVertexUvs[0].push([
        new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
        new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
        new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
    ]);
}
geometry.uvsNeedUpdate = true;