javascript - three.js lightbox not showing -

i create lightbox/popup of three.js model. html canvas appearing cannot see three.js model inside canvas , don't understand why. thanks

http://jsfiddle.net/cool_brian/e72duxwc/2/

my three.js function:

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 light box:

jquery(document).ready(function ($) {  //alert("the doc ready"); $('.lightbox_trigger').click(function (e) {      //prevent default action (hyperlink)     e.preventdefault();      var lightbox =         '<div id="lightbox">' +         '<p>click close</p>' +         '<div id="content">' +         '<canvas id="mycanvas" width="800px" height="800px"style="border:10px solid #000000;">' +         '</canvas>' +         '</div>' +         '</div>';      //insert lightbox html page     $('body').append(lightbox);  });  //click anywhere on page rid of lightbox window $('#lightbox').live('click', function () {     $('#lightbox').hide(); }); 

html:

<p>lightbox demo     <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> 

you using "onclick" aswell adding click events jquery.
1 . removed onclick.

your path external three.js wrong , told jsfiddle include it.
2 . removed included (framework section) three.js , add correct github path latest three.js (external resources section).

3 . changed couple of class , function calls latest three.js.

4 . changed way canvas being added page.

5 . added cancelanimationframe when lightbox closed.

it should display how expect.
but.
close first 'lightbox' creating new lightbox every time text clicked, hide when closed. results in more 1 lightbox div being in dom (but 1 visible).
correct suggest create lightbox div when page loads, hide it, add new scene , show lighbox when needed , remove scene , hide lightbox when appropriate.
here jsfiddle: http://jsfiddle.net/e72duxwc/4/