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

}

- PLAYCUBE

Answer 1

你的问题可能是你在使用 window.innerWidth 和 window.innerHeight。如果你想让 three.js 画布填满整个窗口，那么使用它们是可以的，但似乎你把 three.js 画布放在了一个 div 里面。
相比于使用 window.innerWidth 和 window.innerHeight，你可能更想使用容器 div 的宽度和高度。
你可能需要像这样使用 document.getElementById('myDiv').style.height 或 document.getElementById('myDiv').clientHeight。

- 2pha

---

我不知道你所说的“无法将样式嵌入JavaScript”的意思。 - 2pha

谢谢哥们，非常感谢你的帮助！在这里找到了一个很棒的解决方案；) - PLAYCUBE

Answer 2

对于我来说，使用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; ......

- Denis Bolomier