Draw a track in three.js

by Frank van Puffelen

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.js"></script>

JavaScript

var camera, scene, renderer, frame, triangle, strip;

init();
animate();

function rotate(vector, angle) {
    var axis = new THREE.Vector3( 0, 0, 1 ); // rotate around z axis
    var matrix = new THREE.Matrix4().makeRotationAxis( axis, angle );
    vector.applyMatrix4( matrix );
}

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);
    
    frame = 0;
    
    var roundRect = "sssaaasssaaasssaaasssaaa"; // s = straight, a = 30 degrees left
    var circle = "aaaaaaaaaaaa";
    var test = "ssasdsaaassdaadsaaaaaaaasddddddddssssaaaaaaaasddsddddaaaaaaass";
    var steps = test;
    var angle = Math.PI / 6;
    
    var current = new THREE.Vector3(0, 0, 0);
    var heading = new THREE.Vector3(0,25,0);
    var path = new THREE.Geometry();
    path.vertices.push(current);
    for (var i=0; i < steps.length; i++) {
        var char = steps.charAt(i);
        var dir = char == 'a' ? 1 : char == 'd' ? -1 : 0;
        if (dir) rotate(heading, dir*angle);
        current = new THREE.Vector3(current.x + heading.x, current.y + heading.y, current.z + heading.z);
        path.vertices.push(current);
    }
    //console.log(path);
    scene.add(
      new THREE.Line( 
        path, 
        new THREE.LineBasicMaterial( { color:  0xffff00, linewidth: 2 } )
      )
    );

var stripGeom = new THREE.Geometry();
stripGeom.vertices.push(new THREE.Vector3(  0,  0,  0));
stripGeom.vertices.push(new THREE.Vector3(100,  0,  0));
stripGeom.vertices.push(new THREE.Vector3(  0, 50,  0));
stripGeom.vertices.push(new THREE.Vector3(100, 50,  0));
stripGeom.vertices.push(new THREE.Vector3(  0,100,  0));
stripGeom.vertices.push(new THREE.Vector3(100,100,  0));
stripGeom.vertices.push(new THREE.Vector3( 50,150,  0));
stripGeom.vertices.push(new THREE.Vector3(150,150,  0));
stripGeom.computeFaceNormals();
strip = new THREE.Mesh(stripGeom, new...