Need for Three.js-Canvas, das die gesamte Breite eines jQuery-modalen Fensters einnimmt

Question

Ich habe ein Problem mit dem Leerzeichen eines THREE.js-Canvas, das ich in ein jQuery-Modal-Fenster eingefügt habe.

Ich habe eine erste Version meines Codes mit THREE.js Leinwand, die alle vollen Fenster (keine div verwendet, nur in Körper). Hier ist eine Erfassung dieser Version im Browser-Fenstern zu sehen:

Nun würde Ich mag all diese Leinwand in ein jQuery modalen Fenster. Hier ist eine Erfassung von dem, was ich (auch mit Firefox Inspektoren):

Wie Sie auf dieser zweiten Version sehen können, die angezeigte Leinwand ist nicht integriert in alle modale Fensterbreite und I don‘ Ich verstehe warum (der blaue Bereich entspricht der Leinwand THREE.js). Diese Leinwand wird mit dem folgenden Code erstellt:

// Main container 
    var popID = 'mainWindow'; 
    mainContainer = document.getElementById(popID); 
    // Initiate WebGLRenderer renderer 
    renderer = new THREE.WebGLRenderer({antialias: true}); 
    // Width and Height 
    popWidth = $('#' + popID).data('width'); // Get width 
    popHeight = $('#' + popID).data('height'); // Get width 
    renderer.setSize(popWidth, popHeight); 
    renderer.sortObjects = true; 
    // Append to mainContainer 
    mainContainer.appendChild(renderer.domElement); 

Es scheint, dass Menü (DatGUI) auf der rechten Seite Leinwand ganze Breite des modalen Fenster nehmen verhindert.

Die DOM-Struktur des modalen Fenster wird mit erstellt:

<div id="mainWindow" data-width="900" data-height="490" class="center popup_block" style="display: block; width: 1296px; height: 705.6px; top: -93.3px; left: 62px;"><a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close"></a> 
    <div id="global-ui"> 
    <div id="buttons-wrapper"> 
    <div id="buttons"><button id="startButtonId" class="btn btn-primary btn-xs" tabindex="13">Start</button><button id="resetButtonId" class="btn btn-default btn-xs" tabindex="14"></button><button type="submit" id="saveButtonId" class="btn btn-primary btn-xs"></button> 
    </div> 
    </div> 
    <div class="dg main a" style="-moz-user-select: none; width: 350px;"> 
    ... 

Sie direkt die zweite Version auf dem folgenden Link testen:

[Testversion] [3]

Sie Klicken Sie ein erstes Mal auf das Bild, wenn Sie sich auf der Seite befinden, und machen Sie dann die Kugel durch Klicken auf den Startknopf unten rechts im modalen Fenster, direkt unter dem rechten Menü: Kugel erscheint o n Firefox, Opera, aber es ist schlecht in Chrome platziert.

Wenn mir jemand helfen könnte, ein THREE.js Canvas zu bekommen, das die ganze Breite des modalen Fensters ausfüllt, wäre das in Ordnung.

Grüße.

Answer 1

Habe es auf meiner Maschine laufen lassen, so habe ich es behoben.

neuen Stil für die Leinwand erstellen

.canvasElementClassName { 
    position : absolute; 
    top : 0px; 
    left : 0px; 
} 

dann für den Code, den Sie müssen nur sicherstellen, dass das Canvas-Element den richtigen Stil.

renderer.domElement.className = "canvasElementClassName"; 

Ich denke, Ihr Problem auch gelöst werden können, wenn Sie die DataGUI und schwimmenden Behälter (position: absolute oder relative) geben, wie Sie jetzt die Leinwand Behälter mit den dataGUI Elemente teilen sich die Leinwand verursacht bemessen sein aufzunehmen .

Sie können das tun mit (ich glaube, oder ähnlich)

// you need an element that has style 
    // position : relative; 
    // top : 0px; 
    // right : 0px; 
    // get that element 
    var container = document.getElementById("GUIcontainer"); 
    // create the GUI with autoplace turned off 
    var GUI = new dat.GUI({ autoPlace: false }); 
    // add the GUI to the container 
    container.appendChild(gui.domElement);