Three.js Rendering und Bootstrap-Gitter

Question

Ich spiele mit Three.js und Bootstrap. Aber, wenn die Bootstrap-Netze verwenden, wird mein Würfel wie diese abgeflacht:

http://imgur.com/a/Ec2Rx

Obwohl, wenn die Größe des Fensters, es funktioniert gut:

http://imgur.com/a/xpmVu

Ich habe versucht, dieses Problem zu beheben in css, aber es hat nicht funktioniert:

CSS

@media(min-width:768px) { 

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

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

Irgendwelche Ideen?

EDIT:

Ich habe auch versucht mit dem js Code zu arbeiten, aber auch keine Ergebnisse:

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

Ihr Problem ist wahrscheinlich, dass Ihre unter Verwendung von window.innerWidth und window.innerHeight.
Die Verwendung dieser ist in Ordnung, wenn Sie möchten, dass Ihre three.js-Leinwand das gesamte Fenster ausfüllt, aber es scheint, als würden Sie Ihre three.js-Zeichenfläche in eine div-Datei einfügen.
Anstatt window.innerWidth und window.innerHeight zu verwenden, möchten Sie wahrscheinlich die Breite und Höhe des Container-Div.

Wahrscheinlich möchten Sie stattdessen etwas wie document.getElementById('myDiv').style.height oder document.getElementById('myDiv').clientHeight verwenden.

Answer 2

Die Lösung für mich mit Bootstrap, 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; ......