three.js lightbox

pop up JQuery div with three.js rotating cube

by cool_brian

HTML

<script src="/Volumes/1TB (College)/Major Project/Pop-Up/three.min.js"></script>
<script src="https://code.jquery.com/jquery-1.6.2.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" onClick="alert(link 1)"> alert </a> 
            </li>
            <li> <a class="lightbox_trigger" onClick="cube();"> three.js example </a> 
            </li>
        </ul>
    </p>
</div>

JavaScript

function cube() {
    
    var myCanvas = document.getElementById("myCanvas");
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);
    renderer.setClearColorHex(0xffffff, 1);
    var geometry = new THREE.CubeGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    var render = function () {
        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) {

        //prevent default action (hyperlink)
        e.preventDefault();

        var lightbox =
            '<div id="lightbox">' +
            '<p>Click to close</p>' +
            '<div id="content">' +
            '<canvas id="myCanvas" width="800px" height="800px"style="border:10px solid #000000;">' +
            '</canvas>' +
            '</div>' +
            '</div>';

        //insert lightbox HTML into page
        $('body').append(lightbox);

    });

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

});