I am playing around with three.js and bootstrap. But, when using the bootstrap grids, my cube gets flattened like this:
https://i.stack.imgur.com/M2G4D.jpg
Though when resizing the window, it works fine:
https://i.stack.imgur.com/E09BL.jpg
I have tried to fix this in css, but it didn't work:
CSS
@media(min-width:768px) {
canvas {
display: block;
width: 100% !important;
height: 33% !important;
}
}
canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
Any ideas?
EDIT:
I also tried to work with the js code, but also no results:
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();
}
}