three.js 灯箱未显示答案

【问题标题】：three.js lightbox not showingthree.js 灯箱未显示
【发布时间】：2014-08-19 18:47:20
【问题描述】：

我想创建一个三.js 模型的灯箱/弹出窗口。我的 HTML 画布出现了，但我看不到画布内的 three.js 模型，我不明白为什么。谢谢

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

我的three.js函数：

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 灯箱：

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();
});

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>

【问题讨论】：

标签： javascript jquery html three.js

【解决方案1】：

您正在使用“onClick”以及使用 jquery 添加点击事件。
1.我删除了onClick。

您到外部 three.js 的路径错误，您还告诉 jsfiddle 包含它。
2.我删除了包含的（框架部分）three.js，并将正确的 github 路径添加到最新的three.js（外部资源部分）。

3 .我为最新的 three.js 更改了几个类和函数调用。

4 。我更改了将画布添加到页面的方式。

5 .我在灯箱关闭时添加了cancelAnimationFrame。

它现在应该显示您的预期。
但是。
每次单击文本时，它只会关闭第一个“灯箱”，因为您正在创建一个新的灯箱，但只有在关闭时才隐藏它。这会导致 DOM 中有超过 1 个灯箱 div（但只有 1 个可见）。
为了纠正这个问题，我建议您在页面加载时创建灯箱 div，将其隐藏，然后只需添加一个新场景并在需要时显示灯箱，然后删除场景并在适当时隐藏灯箱。
这是 JSFIDDLE：http://jsfiddle.net/e72duxwc/4/

【讨论】：