相关疑难解决方法(0)

我正在玩three.js和bootstrap.但是,当使用bootstrap网格时,我的立方体变得扁平,如下所示:

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;
}

有任何想法吗？

编辑:

我也尝试使用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, …