Three.jsレンダリングとブートストラップグリッド

Question

私はthree.jsとブートストラップで遊んでいます。しかし、ブートストラップグリッドを使用しているとき、私のキューブが次のように平坦化します：

http://imgur.com/a/Ec2Rx

ものの、ウィンドウのサイズを変更する際、それが正常に動作します：

http://imgur.com/a/xpmVu

私はこれで問題を解決しようとしていますCSSが、それはうまくいきませんでした：

CSS

@media(min-width:768px) { 

canvas { 
    display: block; 
    width: 100% !important; 
    height: 33% !important; 
} 
} 

canvas { 
    display: block; 
    width: 100% !important; 
    height: 100% !important; 
} 

アイデア？

EDIT：

私もJSコードで動作するようにしようとしたが、また何もありません：

JS：

renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.getElementById('render').appendChild(renderer.domElement); 
    window.addEventListener('resize', onWindowResize, false); 

    render(); 
} 

function onWindowResize() { 

if (window.matchMedia('(min-width:768px)').matches) { 
    renderer.setSize(window.innerWidth, window.innerHeight * 0.33); 
    camera.updateProjectionMatrix(); 
    camera.aspect = window.innerWidth/window.innerHeight; 
    render(); 
} 

else { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    render(); 
} 

} 

Answer 1

あなたの問題は、おそらくあなたのことですwindow.innerWidthとwindow.innerHeightを使用してください。
three.jsキャンバスがウィンドウ全体を埋めるようにしたいのですが、divの内側にthree.jsキャンバスを置いているようです。
window.innerWidthとwindow.innerHeightの代わりに、おそらくコンテナdivの幅と高さを使用します。

おそらくdocument.getElementById('myDiv').style.heightまたはdocument.getElementById('myDiv').clientHeightのようなものを使用します。

Answer 2

ブートストラップ、CSSと私のためのソリューション：

#webgl_container{ 
    width:100%; 
    min-width:300px; 
    height:640px; 
    margin:auto; 
} 

#webglworld{ 
    min-width:400px; 
    width:100%; 
    height:600px; 
    margin:auto; 
} 

HTML：

<div id= "webgl_container" class="row"> 
<div id="webglworld"> 
</div> 
<div> 

のJs：

function init() { 
    scale = 10; 
    WEBGL_ID = "webglworld"; 
    webgl_div= document.getElementById(WEBGL_ID); 
    set_height_and_width(); 
    aspectRatio = WIDTH/HEIGHT; 
.... 
    renderer.setSize(WIDTH, HEIGHT); 
    webgl_div.appendChild(renderer.domElement); 
....} 

function set_height_and_width(){ 
    var dimensions = webgl_div.getBoundingClientRect(); 
    HEIGHT = dimensions.height; 
    WIDTH = dimensions.width; 
    ......} 

function onWindowResize() { 
    set_height_and_width(); 
    renderer.setSize(WIDTH, HEIGHT); 
    camera.aspect = WIDTH/HEIGHT; ......