5

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

}

2 Answers 2

2

Your issue is probably that your using window.innerWidth and window.innerHeight.
Using these is fine is you want your three.js canvas to fill the whole window, but it seems as if you are putting your three.js canvas inside of a div.
Instead of using window.innerWidth and window.innerHeight, you probably want to use the width and height of the container div.

You probably want to use something like document.getElementById('myDiv').style.height or document.getElementById('myDiv').clientHeight instead.

2
  • I don't know what you mean by "can't get the style into the javascript"
    – 2pha
    Aug 8, 2016 at 2:14
  • Thanks man, appreciate your help! Got a great solution here ;)
    – PLAYCUBE
    Aug 8, 2016 at 12:11
-1

The solution for me with bootstrap , css:

#webgl_container{
  width:100%;
  min-width:300px;
  height:640px;
  margin:auto;
}

#webglworld{
  min-width:400px;
  width:100%;
  height:600px;
  margin:auto;
}

Html:

<div id= "webgl_container" class="row">
 <div id="webglworld">
 </div>
<div>

Js :

function init() {
    scale = 10;
    WEBGL_ID = "webglworld";
    webgl_div= document.getElementById(WEBGL_ID);
    set_height_and_width();
    aspectRatio = WIDTH / HEIGHT;
....
    renderer.setSize(WIDTH, HEIGHT);
    webgl_div.appendChild(renderer.domElement);
....}

function set_height_and_width(){
    var dimensions = webgl_div.getBoundingClientRect();
    HEIGHT = dimensions.height;
    WIDTH = dimensions.width;
    ......}

function onWindowResize() {
    set_height_and_width();
    renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT; ......

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.