three.js lightbox

pop up JQuery div with three.js rotating cube

HTML

<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/c1802fa6afda70cd664076263a49fae9c07b06b5/build/three.min.js"></script>
<div id="wrapper">
     <h1>Super Simple Lightbox</h1>

    <p>Our super simple lightbox demo. Here are the image links:
        <ul>
            <li> <a class="lightbox_trigger"> three.js example </a> 
            </li>
        </ul>
    </p>
</div>

JavaScript

var renderFrame;
function cube() {
    
    //var myCanvas = document.getElementById("myCanvas");
    var canvasContainer = $('#lightbox #content');
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, canvasContainer.width() / canvasContainer.height(), 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(canvasContainer.width(), canvasContainer.height());
    //renderer.setClearColorHex(0xffffff, 1);
    renderer.setClearColor(0x0000ff, 1);
    //var geometry = new THREE.CubeGeometry(10, 10, 10);
    var geometry = new THREE.BoxGeometry(20, 20, 20);
    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
console.log(scene);
    camera.position.z = 80;
    
    //var ambient_light = new THREE.AmbientLight(0x333333);
            //scene.add(ambient_light);
    canvasContainer.append(renderer.domElement);

    var render = function () {
        //console.log('render');
         renderFrame = requestAnimationFrame(render);

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

        renderer.render(scene, camera);
    };

    render();
}

jQuery(document).ready(function ($) {

    //alert("the doc is ready");
    $('.lightbox_trigger').click(function (e) {
        
            $(this).addClass('open');
            //prevent default action (hyperlink)
            e.preventDefault();
    
            var lightbox =
                '<div id="lightbox">' +
                '<p>Click to close</p>' +
                '<div id="content" style="width: 300px; height:300px; border:10px solid #000000;">' +
                '</div>' +
                '</div>';
    
            //insert lightbox HTML into page
            $('body').append(lightbox);
            cube();

    });

    //Click anywhere on the page to get rid of lightbox window
    
    $('#lightbox').live('click', function () {
       ...