三角形上的three.js纹理不工作

我试图使用three.js在face3上映射纹理，但我只得到一个黑色三角形。下面是我使用的代码（three.js r71）

似乎没有加载纹理图像，或者没有正确定义FaceVertexUV。知道怎么了吗

<script type="text/javascript">
  var vertices, faces, scene, group, camera, renderer;

  vertices = [[0.0,0.0,0.0],
              [1.0,0.0,0.0],
              [1.0,1.0,0.0]];
  faces = [[3,0,1,2]];

  init();
  animate();

  function init() {
    scene = new THREE.Scene();
    var w = window.innerWidth, h = window.innerHeight;

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(w, h);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(90, w/h, 0.1, 100);
    camera.position.set(0,0,2);
    scene.add(camera);

    window.addEventListener('resize', function() {
      var w = window.innerWidth, h = window.innerHeight;
      renderer.setSize(w, h);
      camera.aspect = w/h;
      camera.updateProjectionMatrix();
    });

    renderer.setClearColor(0x333F47, 1);

    var light = new THREE.PointLight(0xffffff);
    light.position.set(-100,200,100);
    scene.add(light);

    var material = new THREE.MeshLambertMaterial({
      map: THREE.ImageUtils.loadTexture('image.png')
    });

    group = new THREE.Object3D();

    var geometry = new THREE.Geometry();
    for (i=0;i<vertices.length;i++) {
      geometry.vertices.push(new THREE.Vector3(vertices[i][0],vertices[i][1],vertices[i][2]));
    }

    var face = new THREE.Face3(faces[0][1],faces[0][2],faces[0][3]);
    geometry.faces.push(face);
    geometry.faceVertexUvs[0].push([new THREE.Vector2(0.0,0.0),
                                    new THREE.Vector2(0.0,1.0),
                                    new THREE.Vector2(1.0,1.0)]);
    var mesh = new THREE.Mesh(geometry, material);
    group.add(mesh);

    group.position.set(-0.5,0.,0.);
    scene.add(group);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
  }

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
  }
</script>

var顶点、面、场景、组、摄影机、渲染器；
顶点=[[0.0,0.0,0.0]，
[1.0,0.0,0.0],
[1.0,1.0,0.0]];
面=[[3,0,1,2]]；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
var w=window.innerWidth，h=window.innerHeight；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
渲染器。设置大小（w，h）；
document.body.appendChild（renderer.doElement）；
摄像机=新的三个透视摄像机（90，宽/高，0.1100）；
摄像机位置设置（0,0,2）；
场景。添加（摄影机）；
addEventListener（'resize'，function（））{
var w=window.innerWidth，h=window.innerHeight；
渲染器。设置大小（w，h）；
摄像头。纵横比=w/h；
camera.updateProjectMatrix（）；
});
setClearColor（0x333F47，1）；
var灯=新的三点灯（0xffffff）；
灯。位置。设置（-100200100）；
场景。添加（灯光）；
var material=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'image.png'）
});
group=new THREE.Object3D（）；
var geometry=new THREE.geometry（）；
对于（i=0；i，您的模型似乎没有计算法线。请尝试在几何体对象上调用此选项：

geometry.computeFaceNormals ();