threejs，为啥没有按顶点渲染颜色，两个三角全是黑色

初学threejs，按文档写的。找不出为啥没有按顶点渲染颜色，两个三角全是黑色，求指点
代码：

效果图：

是不是没有光照，你试着加上光源，或者关闭光照。有帮助请采纳谢谢！
方便的话发我看一下。

<script>
        var scene = new THREE.Scene();

        // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
        var axisHelper = new THREE.AxisHelper(250);
        scene.add(axisHelper);

        var geometry = new THREE.Geometry();
        // 建立顶点坐标
        var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
        var p2 = new THREE.Vector3(80, 0, 0); //顶点2坐标
        var p3 = new THREE.Vector3(0, 80, 0); //顶点3坐标
        //顶点坐标添加到geometry对象
        geometry.vertices.push(p1, p2, p3);

        // Color对象表示顶点颜色数据
        var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
        var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
        var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
        //顶点颜色数据添加到geometry对象
        geometry.colors.push(color1, color2, color3);

        var face1 = new THREE.Face3(0, 1, 2);
        //三角面每个顶点的法向量
        var n1 = new THREE.Vector3(0, 0, 1); //三角面Face1顶点1的法向量
        var n2 = new THREE.Vector3(0, 0, 1); //三角面2Face2顶点2的法向量
        var n3 = new THREE.Vector3(0, 0, 1); //三角面3Face3顶点3的法向量

        // 设置三角面Face3三个顶点的法向量
        face1.vertexNormals.push(n1, n2, n3);
        geometry.faces.push(face1);

        //材质对象
        var material = new THREE.MeshLambertMaterial({
            // color: 0x00ff00,
            vertexColors: THREE.VertexColors, //以顶点颜色为准
            side: THREE.DoubleSide, //两面可见
        });
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh);

        /**
         * 相机设置
         */
        var width = window.innerWidth; // 窗口宽度
        var height = window.innerHeight; // 窗口高度
        var k = width / height; // 窗口宽高比
        var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // 创建相机对象
        // var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(200, 300, 200); // 设置相机位置xyz
        camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)

        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); // 设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
        document.body.appendChild(renderer.domElement); // body元素中插入canvas对象
        renderer.render(scene, camera);
    </script>