Using texgen.js with three.js

how to use texgen.js to generate procedural textures and use them in three.js

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://jeromeetienne.github.io/texgen.js/src/TexGen.js"></script>

JavaScript

var camera, scene, renderer, mesh;

init();
animate();

function init() {
    // NOTE: be sure to include texgen.js - see externals Resources in left sidebar

    // build a tgTexture - use texgen.js editor
    var tgTexture = new TG.Texture(256, 256)
        .add(new TG.SinY().frequency(0.32).offset(0))
        .add(new TG.SinX().frequency(0.16).offset(0))
        .add(new TG.Twirl().position(128, 128).radius(120).strength(0.37));

    // create THREE.Texture from TG.Texture
    var texture = new THREE.Texture(tgTexture.toCanvas());
    texture.needsUpdate = true;

    // create the geometry
    var geometry = new THREE.CubeGeometry(200, 200, 200);
    // create the material with the texture
    var material = new THREE.MeshBasicMaterial({
        map: texture
    });
    // create the mesh itself
    mesh = new THREE.Mesh(geometry, material);

    scene = new THREE.Scene();
    scene.add(mesh);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    // init the renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}