3D CSS3 장면 자동 크기 - 3D DIV의 픽셀 크기 계산?

CSS3, HTML5 및 Javascript를 사용하여 3D 풍경 (미로)을 만들었습니다. 화면 크기에 따라 풍경 크기를 자동으로 조정하여 다양한 크기의 화면에 맞 춥니 다. 그 일을하는 가장 좋은 방법은 무엇입니까? 풍경/화면을 자동으로 자동 크기 조정하는 방법이 있습니까? 자동적 인 방법이 없으면3D CSS3 장면 자동 크기 - 3D DIV의 픽셀 크기 계산?

은 다음 I이 질문 가지고 "카메라 앞에"를 관점 P. 로, I가 translate3d (X, Y, Z)를 사용하여 배치 크기 너비 x 높이의 DIV 존재 이 DIV의 실제 크기를 화면의 픽셀 단위로 계산하려면 어떻게해야합니까? 내가 크롬

출처

2012-10-15 Arie Livshin

다음 코드가하는 속임수. 장면이 원래 설계된 창의 크기 (1920 * 965)를 고려하면이 코드는 부모 컨테이너의 현재 크기를 가져오고 장면이 원래 1920 * 965에 상대적으로 포함 된 Div의 크기를 조정합니다. 참고 - 장면 내부 요소의 3D 스케일링을 수행하지는 않지만 전체 장면을 포함하는 div의 크기를 조절합니다. 내부의 내용은 자동으로 크기가 조절됩니다.

부모 컨테이너의 크기를 조절할 때 스크린 중심에서 멀리 떨어진 곳으로 장면을 이동시키는 방법에 대해 Div가 올바른 위치에 놓이게하려면 음수 좌표를 사용하여 코드가 장면 위치를 왼쪽 및 위쪽으로 이동시키는 방법에 유의하십시오.

function resizeWin() { 
     wW = ourDiv.parentNode.offsetWidth; 
     wH = ourDiv.parentNode.offsetHeight; 
     var scaler=Math.min(wW/1920, wH/965); // original screen was designed in full HD Chrome 
     var w=wW/scaler; 
     var h=wH/scaler; 
     var left=(w-scaler*w)/2; 
     var top=(h-scaler*h)/2; 


     var style = "width:"+w+"px; height:"+h+"px;"+allStyles("-webkit-transform: translate(-"+left+"px,-"+top+"px) scale("+scaler+");"); 

     ourDiv.setAttribute("style", style); 
     redrawScene(); 
    }

출처

2012-10-18 09:53:39

# 1을 사용하고 있습니다 - - 당신이 그것을 확장 위 또는 아래로 전체 일을 확장 할 수 scale3d를 사용하려는 경우 BTW

. 화면 크기를 측정하고 (예를 들어, 당신이는 800x800 DIV를 화면이 2 배에 의해 규모, 1600 인 경우)

# 2에 필요한 어떤 비율로 당신의 사업부를 확장 - getBoundingClientRect()

출처

2012-10-16 02:12:39

당신은 getBoundingClientRect()에 대해 옳았습니다. 고맙습니다. 자동 크기 - scale3d와 관련하여 문제가 있습니다. "전체적인 것"을 스케일 할 수는 없습니다. 3 개의 좌표 모두를 한번에 스케일링하면 장면이 같은 크기로 남을 것입니다. 현재 각도에 따라 비율을 조정하면 장면 크기가 조정되지만 자동 크기 조정이 매우 복잡해집니다. –

3D CSS3 장면 자동 크기 - 3D DIV의 픽셀 크기 계산?

답변

관련 문제