Three.js 렌더링 및 부트 스트랩 그리드

나는 three.js 및 부트 스트랩으로 놀고 있습니다. 부트 스트랩 그리드를 사용하지만, 내 큐브는 다음과 같이 평평하게됩니다 : 창 크기를 조정하면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을 사용하십시오.
세 개의 .js 캔버스가 전체 창을 채우도록하려는 경우이 옵션을 사용하는 것이 좋지만 div의 내부에 three.js 캔버스를 배치하는 것처럼 보입니다.
window.innerWidth 및 window.innerHeight을 사용하는 대신 container div의 너비와 높이를 사용하는 것이 좋습니다.

아마도 document.getElementById('myDiv').style.height 또는 document.getElementById('myDiv').clientHeight과 같은 것을 사용하고 싶을 것입니다.

출처

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

같은 생각하지만, 자바 스크립트로 스타일을 얻을 수 없다 ... – PLAYCUBE

나는 "자바 스크립트에 스타일을 가져올 수 없다"는 의미가 무엇인지 모르겠다. – 2pha

감사 인사, 감사합니다. 당신의 도움을 청하십시오! 좋은 솔루션을 얻었 [여기] (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 렌더링 및 부트 스트랩 그리드

답변

관련 문제