我正在尝试使用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();
}
}