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