Three.js渲染和bootstrap网格

Question

我正在玩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, window.innerHeight);
    render();
}

}

Answer 1

您的问题可能是您使用window.innerWidth和window.innerHeight。
如果您希望您的 Three.js 画布填充整个窗口，那么使用这些就可以了，但看起来好像您将您的 Three.js 画布放在了 div 中。您可能想使用容器 div 的宽度和高度，
而不是使用window.innerWidthand 。window.innerHeight

您可能想使用类似document.getElementById('myDiv').style.heightor 的东西document.getElementById('myDiv').clientHeight来代替。