Three.js 渲染和引导网格答案

【问题标题】：Three.js rendering and bootstrap gridsThree.js 渲染和引导网格
【发布时间】：2016-12-10 08:34:45
【问题描述】：

我在玩 three.js 和 bootstrap。但是，当使用引导网格时，我的立方体会像这样变平：

虽然在调整窗口大小时，它工作正常：

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

}

【问题讨论】：

标签： javascript html css twitter-bootstrap three.js

【解决方案1】：

您的问题可能是您使用了window.innerWidth 和window.innerHeight。
如果您希望您的 three.js 画布填满整个窗口，使用这些就可以了，但您似乎将您的 three.js 画布放在一个 div 中。
您可能希望使用容器 div 的宽度和高度，而不是使用 window.innerWidth 和 window.innerHeight。

您可能想改用 document.getElementById('myDiv').style.height 或 document.getElementById('myDiv').clientHeight 之类的东西。

【讨论】：

我不知道您所说的“无法将样式导入 javascript”是什么意思
谢谢大佬，感谢您的帮助！得到了一个很好的解决方案here ;)

【解决方案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; ......

【讨论】：