Fatal编程技术网
  • javascript/
  • Javascript 将Three.js场景设置为Jquery模式窗口

Javascript 将Three.js场景设置为Jquery模式窗口

javascript jquery css canvas three.js

Javascript 将Three.js场景设置为Jquery模式窗口,javascript,jquery,css,canvas,three.js,Javascript,Jquery,Css,Canvas,Three.js,我尝试将一个Three.js场景插入Jquery模式窗口。目标是使用更大尺寸的Three.js场景，即在更大的窗口中。 该场景预计会在单击代表该场景但尺寸较小的图像后出现 现在，你可以看到一个我成功做到的例子：[在这个链接上][1] 如您所见，我有一个居中的图像，如果鼠标在它上面并单击它，预期的结果是将Three.js场景放入模式窗口 但是，正如您可以测试的那样，如果我单击，事情就完全错了（除了图像之外，在左上角还会出现一个场景窗口…） 我解释我做了什么（参见Javascript源代码[此处][

我尝试将一个Three.js场景插入Jquery模式窗口。目标是使用更大尺寸的Three.js场景，即在更大的窗口中。 该场景预计会在单击代表该场景但尺寸较小的图像后出现

现在，你可以看到一个我成功做到的例子：[在这个链接上][1]

如您所见，我有一个居中的图像，如果鼠标在它上面并单击它，预期的结果是将Three.js场景放入模式窗口

但是，正如您可以测试的那样，如果我单击，事情就完全错了（除了图像之外，在左上角还会出现一个场景窗口…）

我解释我做了什么（参见Javascript源代码[此处][2]）：

当用户浏览图像并单击它（
imageElement
DOM）时，我调用代码的以下部分（其灵感来自标准Jquery模态窗口代码）：

最初，我做了
container.style.display='none'否则，将绘制场景，而我没有单击图像

在HTML源代码中，我完成了以下工作：


<td class="body_content"><br>
    <!-- WebGL into td body_content -->
    <div id="canvas" class="center"></div>
    <!-- Javascript -->                                                                  
    <script src="js/sphere_dev.js"></script>                                                                                     
</td>


在sphere_dev.js代码中，这里是我所做的（开始时，我返回
rel
和
width
变量，然后使用
fadeIn
）：

我必须让你注意到功能
window.offsetHeight
在Firefox和Chrome上不起作用，相反，我必须使用
window.innerHeight

以下是我用于此弹出窗口的CSS：


.popup_block{
display: none; /* masked by default */
background: #fff;
padding: 20px;
border: 20px solid #ddd;
font-size: 1.2em;
position: fixed;
z-index: 99999;
/*--Les différentes définitions de Box Shadow en CSS3--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--Coins arrondis en CSS3--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


整个CSS可在[此链接][6]上获得

如果有人能帮我解决定心的问题


将
与您已有的代码一样，您只需将画布元素移动到弹出窗口
div#fade
块中，然后在
a.close，body
click事件中保留
fadeOut
即可将其隐藏，而不是在body click上销毁。尝试将图像单击事件更改为如下所示：


$('#contrast').get(0).onclick = function RaiseWindow() {
//$('a.poplight').on('click', function() {

    var popID = $(this).data('rel'); // Get name of pop-up
    var popWidth = $(this).data('width'); // Get width

    // Make appear pop-up and add closing button
    $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    // Get margin to center window - adjust with 80px
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    // Apply Margin to Popup
    $('#' + popID).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
        });

    // Display background
    //$('body').append('<div id="fade"></div>');
    //$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
    //$('#fade').css({'filter' : 'alpha(opacity=0.99)'}).fadeIn();

    if($('#fade').length > 0) {
        $('#fade').fadeIn();
    } else {
        $('<div>', { id: 'fade' })
            .appendTo('body')
            .css({'filter' : 'contrast(0.8)'})
            .append($('#canvas').show())
            .fadeIn();
    }

    return false;
};



$('body').on('click', 'a.close, #fade', function() { // When click body
    $('#fade , .popup_block').fadeOut(); // They disappear
});



查看我的屏幕截图，它在这里工作：
与您已有的代码一样，您只需将画布元素移动到弹出窗口
div#fade
块中，然后在
a.close，body
click事件中保留
fadeOut
即可隐藏它，而不是在body click上销毁它。尝试将图像单击事件更改为如下所示：


$('#contrast').get(0).onclick = function RaiseWindow() {
//$('a.poplight').on('click', function() {

    var popID = $(this).data('rel'); // Get name of pop-up
    var popWidth = $(this).data('width'); // Get width

    // Make appear pop-up and add closing button
    $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    // Get margin to center window - adjust with 80px
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    // Apply Margin to Popup
    $('#' + popID).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
        });

    // Display background
    //$('body').append('<div id="fade"></div>');
    //$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
    //$('#fade').css({'filter' : 'alpha(opacity=0.99)'}).fadeIn();

    if($('#fade').length > 0) {
        $('#fade').fadeIn();
    } else {
        $('<div>', { id: 'fade' })
            .appendTo('body')
            .css({'filter' : 'contrast(0.8)'})
            .append($('#canvas').show())
            .fadeIn();
    }

    return false;
};



$('body').on('click', 'a.close, #fade', function() { // When click body
    $('#fade , .popup_block').fadeOut(); // They disappear
});



查看我的屏幕截图，它在这里工作：
我认为您应该做的第一件事是在没有three.js场景的情况下让模态正常工作，因为对我来说，这似乎只是一个定位问题。谢谢，我要看我的问题的这一部分-@2pha你能看一下我上面的更新1吗？在那里我可以看到灰色窗口，但不能显示弹出窗口。我认为你应该做的第一件事是在没有three.js场景的情况下让模态正常工作，因为这似乎对我来说只是一个定位问题。谢谢，我要看我的问题的这一部分-@2pha你能看一下我上面的更新1吗？我可以进入灰色窗口，但不能显示弹出窗口。-@christos Lytras谢谢你的帮助，现在我有一个关于居中的问题，你能看一下上面的更新2吗？问候-@christos Lytras谢谢你的帮助，现在我得到了一个关于定心的问题，你能看看上面的更新2吗？当做

.popup_block{
display: none; /* masked by default */
background: #fff;
padding: 20px;
border: 20px solid #ddd;
font-size: 1.2em;
position: fixed;
z-index: 99999;
/*--Les différentes définitions de Box Shadow en CSS3--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--Coins arrondis en CSS3--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}



$('#contrast').get(0).onclick = function RaiseWindow() {
//$('a.poplight').on('click', function() {

    var popID = $(this).data('rel'); // Get name of pop-up
    var popWidth = $(this).data('width'); // Get width

    // Make appear pop-up and add closing button
    $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

    // Get margin to center window - adjust with 80px
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    // Apply Margin to Popup
    $('#' + popID).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
        });

    // Display background
    //$('body').append('<div id="fade"></div>');
    //$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
    //$('#fade').css({'filter' : 'alpha(opacity=0.99)'}).fadeIn();

    if($('#fade').length > 0) {
        $('#fade').fadeIn();
    } else {
        $('<div>', { id: 'fade' })
            .appendTo('body')
            .css({'filter' : 'contrast(0.8)'})
            .append($('#canvas').show())
            .fadeIn();
    }

    return false;
};



$('body').on('click', 'a.close, #fade', function() { // When click body
    $('#fade , .popup_block').fadeOut(); // They disappear
});