Three.js渲染和自舉網格

我正在玩three.js和bootstrap。但是，使用引導網格的時候，我的立方體被夷爲平地這樣的：Three.js渲染和自舉網格

雖然調整窗口大小時，它工作正常：

我曾試圖解決這個問題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(); 
} 

}

來源

2016-08-04 PLAYCUBE

您的問題可能是你的使用window.innerWidth和window.innerHeight。
使用這些是好的，你想你的three.js畫布填充整個窗口，但它好像你把你的three.js畫布放在一個div內。
而不是使用window.innerWidth和window.innerHeight，您可能想要使用容器div的寬度和高度。

您可能想要使用類似document.getElementById('myDiv').style.height或document.getElementById('myDiv').clientHeight的東西。

來源

2016-08-04 11:16:04 2pha

同樣的想法，但無法獲得風格注入的JavaScript ... – PLAYCUBE

我不知道你的意思是「無法將樣式轉換爲javascript」 – 2pha

謝謝你，thanks愛你的幫助！有一個很好的解決方案[這裏]（http://stackoverflow.com/questions/38789139/css-how-to-set-the-width-and-height-dependent-on-the-screen-window-size）;） – PLAYCUBE

-1

與引導，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; ......

來源

2017-01-09 17:25:00

Three.js渲染和自舉網格

回答

相關問題