javascript - 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 Canvas 填满整个窗口，使用这些很好，但看起来好像您将 three.js Canvas 放在 div 中。
您可能想使用容器 div 的宽度和高度，而不是使用 window.innerWidth 和 window.innerHeight。

您可能想使用 document.getElementById('myDiv').style.height 或 document.getElementById('myDiv').clientHeight 之类的东西。