3D Box Lines

by Theo Armour

HTML

<script src=http://mrdoob.github.io/three.js/build/three.min.js></script>
<script src=http://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.js></script>

JavaScript

var info, renderer, scene, camera, controls, stats;

init();
animate();

function init() {
    var geometry, material, mesh, line;

    document.body.style.cssText = 'font: 600 12pt monospace; margin: 0; overflow: hidden; text-align: center; ';

    var info = document.body.appendChild(document.createElement('div'));
    info.style.cssText = 'position: absolute; top: 0; width: 100% ';
    info.innerHTML = '<h1>3D Box Lines</h1>';

    renderer = new THREE.WebGLRenderer({
        alpha: 1,
        antialias: true,
        clearColor: 0xffffff
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.set(200, 200, 200);
    controls = new THREE.TrackballControls(camera, renderer.domElement);

    // ground plane
    material = new THREE.MeshNormalMaterial();
    geometry = new THREE.CubeGeometry(600, 1, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 100 segment line
    var points = [];

    for (var i = 0; i < 100; i++) {
        points.push([Math.random() * 600 - 300, Math.random() * 100, Math.random() * 200 - 100]);
    }

    geometry = drawLines(points);
    material = new THREE.LineDashedMaterial({
        color: 0x000000,
        linewidth: 2,
        dashSize: 15,
        gapSize: 10
    });
    line = new THREE.Line(geometry, material);
    scene.add(line);

    line = drawBoxLines(points, 10, 4);
    scene.add(line);
}

function drawLines(vertices) {
    var geometry = new THREE.Geometry();
    geometry.vertices = vertices.map(convert);
    return geometry;
}

function drawBoxLines(vertices, width, height) {
    var vertex, geometry, material, mesh;
    var segments = new THREE.Object3D();
    vertices = vertices.map(convert);

    for (var i = 0, len = vertices.length - 1; i < len; i++) {
        vertex =...