Three.js rendering and bootstrap grids

问题

I am playing around with three.js and bootstrap. But, when using the bootstrap grids, my cube gets flattened like this:

http://imgur.com/a/Ec2Rx

Though when resizing the window, it works fine:

http://imgur.com/a/xpmVu

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

}

回答1:

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:

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; ......

来源：https://stackoverflow.com/questions/38763623/three-js-rendering-and-bootstrap-grids

标签

javascript

html

css

twitter-bootstrap

three.js