js自定义旋转几何问题

我刚刚开始使用Javascript，特别是three.js。我有一个自定义的几何体，我用它来创建一个三角形的棱镜。它已经产生了正确的形状，但当它旋转时，一些面看起来不正确。其他内置几何(立方体几何，圆柱体几何…)工作得很好。它是否与我的自定义几何有关，还是与照明有关?或网格或材料?

下面是小提琴的一个例子:3D形状小提琴

相关代码如下:

function getTriPrismGeometry(){
    var geometry = new THREE.Geometry()
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100,  100, 0 )) );
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100, -100, 0 ) ));
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3(  100, -100, 0 )) );
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100,  100, -100 )) );
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3( -100, -100, -100 ) ));
    geometry.vertices.push( new THREE.Vertex(new THREE.Vector3(  100, -100, -100 )) );
    geometry.faces.push( new THREE.Face3(0,1,2 ) );
    geometry.faces.push( new THREE.Face3(3,4,0 ) );
    geometry.faces.push( new THREE.Face3( 0, 1, 4 ) );
    geometry.faces.push( new THREE.Face3( 1, 4, 5 ) );
    geometry.faces.push( new THREE.Face3( 1, 2,5) );
    geometry.faces.push( new THREE.Face3( 2, 0, 3 ) );
    geometry.faces.push( new THREE.Face3( 2, 3, 5 ) );
    geometry.faces.push( new THREE.Face3( 3,4, 5 ) );
    geometry.computeCentroids();
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    init(geometry, true);
}
function init(geometry, isCustom) {
    camera = new THREE.PerspectiveCamera( 75, width/height, 1, 10000 );
    camera.position.z = 300;
    scene = new THREE.Scene();
    material = new THREE.MeshLambertMaterial( { color: 0xff0000  } );
    mesh = new THREE.Mesh( geometry, material );
    if (isCustom){
        material.side = THREE.DoubleSide;
        mesh.doubleSided = true;
    }
    scene.add( mesh );
    ambient = new THREE.AmbientLight( 0x101010 );
    ambient.position.set(0, -70, 100).normalize();
    scene.add( ambient );
    directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position = camera.position;
    scene.add( directionalLight );;
}
function animate() {
    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );
    render();
}
function render(){
    var delta = Date.now() - start;
    directionalLight.position = camera.position;
    //mesh.position.y = Math.abs( Math.sin( delta * 0.002 ) ) * 150;
    mesh.rotation.x = delta * 0.0003;
    mesh.rotation.z = delta * 0.0002;

    renderer.render( scene, camera );
}

我对three.js非常陌生，尤其是3D渲染，任何帮助都很感激。提前感谢!