【three.js】Geometryクラスで正三角柱をつくる #three.js

three.jsの公式チュートリアルCreating a sceneではBoxGeometryを使って立方体を描いています。
もっと基本的なクラスであるGeometryクラスを使い、正三角柱を作ってみました。
正三角柱の中心（底面の正三角形の重心、かつ側面の高さ半分のところ）に座標原点が来るようにしました。
EdgesGeometryを利用して、ジオメトリのワイヤフレーム（辺）を黒い線で描いています。
また、座標軸を赤緑青で描いています。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 三角柱をつくる。原点は底面正三角形の重心、柱の高さの半分の位置とする。
// length: 底面の正三角形の辺の長さ
// height: 三角柱の高さ
function createTriangle(length, height)
{

    var faceColor = 0x00ff00;

    var halfHeight = height / 2.0;
    var halfLength = length / 2.0;
    // 正三角形の重心から辺へ下ろした垂線の長さ
    var distanceToLine = halfLength * Math.tan(Math.PI / 6.0);
    // 正三角形の頂点から対辺へ垂線を下ろしたときの、垂線と重心の間の距離
    var distanceFromVertex = halfLength / Math.tan(Math.PI / 6.0) - distanceToLine;

    var vertices = [
        new THREE.Vector3(-halfLength, halfHeight, distanceToLine),   // 上面の三角形の頂点
        new THREE.Vector3(0, halfHeight, -distanceFromVertex),
        new THREE.Vector3(halfLength, halfHeight, distanceToLine),
        new THREE.Vector3(-halfLength, -halfHeight, distanceToLine),   // 下面の三角形の頂点
        new THREE.Vector3(0, -halfHeight, -distanceFromVertex),
        new THREE.Vector3(halfLength, -halfHeight, distanceToLine),
    ];
    var faces = [
        new THREE.Face3(0, 2, 1), // 上面
        new THREE.Face3(3, 4, 5), // 下面
        new THREE.Face3(0, 3, 2), // 手前側面
        new THREE.Face3(2, 3, 5),
        new THREE.Face3(0, 1, 3), // 左側面
        new THREE.Face3(1, 4, 3),
        new THREE.Face3(2, 5, 4), // 右側面
        new THREE.Face3(4, 1, 2),
    ];

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

    var material = new THREE.MeshBasicMaterial({ color: faceColor });
    // 三角柱のワイヤーフレームを描く
    var wireframeGeometry = new THREE.EdgesGeometry(geometry);
    var wireframeMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 });

    var triangleMesh = new THREE.Mesh(geometry, material);
    var wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial);

    triangleMesh.add(wireframe);
    return triangleMesh;
}

// x, y, z軸を赤、緑、青で描く
// length: 軸の長さ
function createAxes(length)
{
    var createOneAxis = function (color, vertex) {
        var material = new THREE.LineBasicMaterial({
            color: color
        });
        var vertices = [
            new THREE.Vector3(0, 0, 0),
            vertex
        ];
        var geometry = new THREE.Geometry();
        geometry.vertices = vertices;

        var line = new THREE.Line(geometry, material);
        return line;
    };


    return [
        createOneAxis(0x770000, new THREE.Vector3(length, 0, 0)),
        createOneAxis(0x007700, new THREE.Vector3(0, length, 0)),
        createOneAxis(0x000077, new THREE.Vector3(0, 0, length))
    ];

}

var mesh = createTriangle(10, 20);
scene.add(mesh);
var axes = createAxes(100);
axes.forEach(function (a) { scene.add(a);})

camera.position.z = 30;
camera.position.y = 30;
camera.position.x = 15;
camera.lookAt(0, 0, 0);

function animate() {
    requestAnimationFrame(animate);
    //mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();
        </script>
    </body>
</html>

上記を適当な名前のhtmlとして保存し、ブラウザで開くとこのように表示されます。
正三角柱はY軸（緑）のまわりを回転します。