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

Question

我在Three.js中有一个单面Mesh，我想应用一个着色器。

当我在网格上应用着色器材质时，它似乎正在读取着色器的单个像素并将该值应用于整个面。我在以下示例中测试了这个： 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;