three.js ~ Wireframe stitching

2016-14-03

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera, scene, light, renderer, geometry, material, mesh1, mesh2, gl;
var directionalLight;

var WIDTH = window.innerWidth - 20;
var HEIGHT = window.innerHeight - 20;

var controls;

init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, 1, 100);
    camera.position.z = 30;
    camera.position.y = 0;
    
    var ambient = new THREE.AmbientLight( 0x404040 );
    scene.add(ambient);
    
    directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
		directionalLight.position.set( 0, 15, 15 );
		scene.add( directionalLight );
    
    scene.add(camera);
    
    // controls
    controls = new THREE.OrbitControls( camera );

  	var geometry2 = createTriangleGeometry();
    var material2 = new THREE.MeshBasicMaterial({
        vertexColors: THREE.VertexColors,
        wireframe: true
    });
    mesh2 = new THREE.Mesh(geometry2, material2);
    mesh2.renderOrder = 1;
    scene.add(mesh2);
    
		var geometry1 = createLineGeometry();
    var material1 = new THREE.LineBasicMaterial({
        linewidth: 1.0,
        vertexColors: THREE.VertexColors,
        depthFunc: THREE.LessDepth
    });
    mesh1 = new THREE.LineSegments(geometry1, material1);
    scene.add(mesh1);
    
    renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true});
    renderer.setSize(WIDTH, HEIGHT);
    renderer.autoClear = false;
    renderer.sortObjects = true;

    document.body.appendChild(renderer.domElement);
}
    
var previousTime;

function animate() {
  	requestAnimationFrame(animate);
    
    render();
}

function render() {
    // Clear renderer
		renderer.clear();
    
    // Render the scene
    renderer.render(scene, camera);
}

function createLineGeometry(color) {
		var geometry = new THREE.BufferGeometry();

		// Creating array buffers
    var positionArray = [];
    var colorArray = [];
    
    // Init cylinder position
    positionArray.push(-10.0, 0, 0);
 ...