Three.js 渲染和引导网格

Posted 2023-02-27

【中文标题】Three.js 渲染和引导网格

【英文标题】：Three.js rendering and bootstrap grids

【发布时间】：2016-12-10 08:34:45

【问题描述】：

我在玩 three.js 和 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();

【参考方案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; ......