将Three.js场景设置为Jquery模态窗口
我尝试将一个Three.js场景插入到Jquery模式窗口中。目标是使用尺寸更大的Three.js场景，即在更大的窗口中。 在点击代表场景但尺寸较小的图像后，预计会出现此场景。
现在，您可以看到我设法做的一个示例：[在此链接上] [1]
正如你所看到的，我有一个居中的图像，如果鼠标在它上面然后点击它，预期的结果是将Three.js场景变成一个模态窗口。
但是，正如你可以测试的那样，如果我点击，事情就完全错了（除了图像之外，左上角会出现一个场景窗口......）
我解释了我的所作所为（参见Javascript source [HERE] [2]）：
当用户超过图像并单击它（imageElement DOM）时，我调用以下代码部分（灵感来自标准的Jquery模式窗口代码）：
imageElement.onclick = function RaiseWindow() {
var popID = 'canvas'; // Find the pop-up
var popWidth = 700; // 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.3)'}).fadeIn();
return false;
};
id canvas的容器（div）可以通过以下方式获得：
// Div container for canvas
container = document.getElementById('canvas');
container.style.display = 'none';
// Initiate WebGLRenderer renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
renderer.sortObjects = true;
// AppendChild renderer to container
container.appendChild(renderer.domElement);
最初，我做了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>
目前，我点击时不显示模态窗口，我不明白为什么。然后，在第一期之后，我必须删除container.style.display = 'none';，但我不能首先执行此操作（Three.js将出现，图像也会出现）。
如果有人可以向我提供线索，首先显示模态窗口，然后将Three.js场景显示在此窗口中。
如有必要，请随时向我询问更多详情。
感谢您的帮助。
更新1：
我已经取得了进步。我设法灰色全窗口，但弹出窗口没有显示。
在HTML代码中，我做了：
<!-- WebGL into td body_content -->
<div id="canvas" data-width="500" data-rel="popup_webgl" class="center"></div>
<!-- HTML content of popup_webgl -->
<div id="popup_webgl" class="popup_block">
<p>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p>
</div>
<!-- Javascript -->
<script src="js/sphere_dev.js"></script>
进入sphere_dev.js代码，在这里我做了什么（在开始时，我回到rel和width个变量，在我使用fadeIn后）：
imageElement.onclick = function RaiseWindow() {
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();
return false;
};
//Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() { // When click body
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); // They disappear
return false;
});
您可以在[此链接] [3]上查看最后的结果。
如果有人能够看到为什么弹出窗口没有显示，即使单击后整个窗口是灰色的。
此致
更新2：
根据不同的答案，我可以显示Three.js场景，但是出现了居中问题。
您可以在[此链接] [4]
上查看最后的结果正如您所看到的，如果您单击图像以显示弹出窗口，则可以使用此功能（在Firefox和Chrome上）：
问题是弹出窗口没有居中（轻微向右移动到顶部，而顶部的垂直边缘太高，最后弹出窗口底部不可见）。
我尝试将其作为中心（mainWidth和mainHeight是全局变量）：
// Keep good proportions for popup (from image (width=900, height=490))
// For popup, set 90% of available width and compute height from this value :
var mainWidth = 0.9*window.innerWidth,
mainHeight = mainWidth*(490/900);
imageElement.onclick = function RaiseWindow() {
var popWidth = mainWidth;
var popHeight = mainHeight;
var xPop = (window.innerWidth/2) - (popWidth/2);
var yPop = (window.innerHeight/2) - (popHeight/2);
console.log('print popWidth = ', popWidth);
console.log('print popHeight = ', popHeight);
// window.offsetHeight not working
//console.log('window.offsetHeight = ', window.offsetHeight);
console.log('print x = ', xPop);
console.log('print y = ', yPop);
// Make appear pop-up and add closing button
$('#' + popID).fadeIn().css({'position': 'fixed', 'width': popWidth+'px', 'height': popHeight+'px', 'top': xPop+'px', 'left': yPop+'px'}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// Display background
$('body').append('<div id="fade"></div>');
// Working only for background
$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
return false;
};
我必须让你注意到功能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]上找到。
如果有人可以帮我解决这个居中问题。
此致
1 个答案:
答案 0 :(得分：0)
与您已有的代码一样，您可以在弹出的div#fade块中移动canvas元素，然后在身体点击时将其销毁，只需将fadeOut留在{ {1}}点击事件。尝试将图像点击事件更改为：
a.close, body和$('#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;
};
点击事件处理程序如下：
a.close, body使用它在我的屏幕截图中查看：http://zikro.gr/dbg/html/treejs-canvas-popup/
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？