1
我尝试将Three.js场景插入到Jquery模式窗口中。目标是使用更大尺寸的Three.js场景，即在更大的窗口中。 此场景预计会在点击表示场景但尺寸较小的图像后出现。将Three.js场景设置为Jquery模式窗口
现在，你可以看到我已经成功地做到一个例子：此链接] [1]
正如你所看到的，我有一个居中的图像，如果鼠标是在它和点击它，预期的结果是让Three.js场景进入模态窗口。
但是，你可以测试它，如果我点击，东西是完全错误（显示在左上角，除了图像...场景窗口）
我解释我做了什么（看到的Javascript源[这里] [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 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]上。
如果有人可以帮我解决这个问题的集中。
问候
我认为你应该做的第一件事是让模式在没有three.js场景的情况下正常工作，因为它似乎只是一个定位给我的问题。 – 2pha
谢谢，我要看看我的问题的这一部分 – youpilat13
- @ 2pha你可以看看我的** UPDATE 1 **上面哪里可以进入灰色窗口，但不显示弹出窗口。 – youpilat13