我尝试将 Three.js 场景插入 jQuery 模式窗口。目标是使用更大尺寸的 Three.js 场景，即在更大的窗口中。单击代表该场景但尺寸较小的图像后，预计会出现该场景。
现在，您可以看到我已成功完成的示例:on this link
如您所见，我有一个居中图像，如果鼠标悬停在它上面并单击它，预期结果是将 Three.js 场景放入模态窗口中。
但是，正如您可以测试的那样，如果我点击，事情就完全错误了(除了图像之外，左上角还会出现一个场景窗口......)
我解释一下我做了什么(参见 JavaScript 源 HERE ):
当用户位于图像上方并单击它(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;
});
您可以在this link上查看最后的结果.
为什么点击后整个窗口都是灰色的，但不显示弹出窗口。
更新2
根据不同的答案，我可以显示 Three.js 场景，但出现了居中问题。
您可以在this link上查看最后的结果
如您所见，如果您单击图像以显示弹出窗口，您会得到以下结果(在 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 可以在 this link 上找到。 .
如何解决这个居中问题。
最佳答案
与您已有的代码一样，您只需将 Canvas 元素移动到弹出 div#fade block 内，然后不要在单击正文时销毁它，只需离开 即可隐藏它。尝试将图像点击事件更改为如下所示:a.close, body 点击事件上的 fadeOut
$('#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点击事件处理程序如下:
$('body').on('click', 'a.close, #fade', function() { // When click body
$('#fade , .popup_block').fadeOut(); // They disappear
});
在此处查看我的屏幕截图:http://zikro.gr/dbg/html/treejs-canvas-popup/
关于javascript - 将 Three.js 场景设置为 jQuery 模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43166285/