Three.jsキャンバスがjQueryモーダルウィンドウの幅をすべて取る必要があります

Question

jQueryモーダルウィンドウに入れたTHREE.jsキャンバスのスペースに関する問題があります。

THREE.jsキャンバスの最初のバージョンでは、すべてのフルウィンドウ（divは使用されず、本体のみ）を使用しました。ここでは、ブラウザのウィンドウで見られ、このバージョンのキャプチャです：

今、私はjQueryのモーダルウィンドウにすべてのこのキャンバスを入れたいと思います。あなたはこの第二のバージョンで見ることができるように

は、表示キャンバスには、すべてのモーダルウィンドウ幅に統合されていないと私はドン」：ここでは（また、Firefoxのインスペクタで）私は何を得るのキャプチャーです理由を理解してください（青い部分はTHREE.jsのキャンバスに対応しています）。このキャンバスは、次のコードを使用して作成されます

// 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); 

それは右にそのメニュー（DatGUI）ようだモーダルウィンドウのすべての幅を取るためにキャンバスを防ぐことができます。

モーダルウィンドウのDOM構造を使用して作成されます。

<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;"> 
    ... 

あなたは直接、以下のリンク上の第二版をテストすることができます

を[テスト版] [3]

ますページ上にある画像を最初にクリックしてから、右のメニューのすぐ下にあるモーダルウィンドウの右下にある開始ボタンをクリックして球を表示させます：球が表示されますo n Firefox、OperaがChrome上に置かれています。

誰かがモーダルウィンドウの幅をすべて満たすTHREE.jsキャンバスを手に入れることができたら、これは問題ありません。

よろしくお願いいたします。

Answer 1

これは私のマシン上で動作するようになったので、これを修正しました。

はあなただけでcanvas要素が正しいスタイルを持っていることを保証するために必要なコードのために次にキャンバス

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

のための新しいスタイルを作成します。

私はあなたがDataGUIと浮動コンテナ（位置：絶対的または相対的）を得た場合、あなたの問題も解決することができると思います

renderer.domElement.className = "canvasElementClassName"; 

今あなたが収容する大きさにするキャンバスを引き起こしdataGUI要素をキャンバスコンテナを共有しているよう。

あなたは

// 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);