Question

我正在玩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();
}

}

Answer 1

您的问题可能是您使用window.innerWidth和window.innerHeight 使用这些很好是你想要你的three.js画布填充整个窗口，但好像你把你的three.js画布放在div里面。
您可能希望使用容器div的宽度和高度，而不是使用window.innerWidth和window.innerHeight。

您可能希望使用document.getElementById('myDiv').style.height或document.getElementById('myDiv').clientHeight之类的内容。

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

Three.js渲染和bootstrap网格

2 个答案: