웹 양식/텍스트 오버레이로 Three.js 전체 화면 앱을 만드는 방법

Question

나는를 사용하여 장면을 렌더링하는 Three.js를 사용하는 웹 응용 프로그램에서 일한지 그래서

(내가 그것을 만드는 방법을 요구하고 있지, 어떻게 반응을 내 응용 프로그램을 만들 것을 요청하고 명확하게하기 위해) 전체 창. 설정 버튼을 클릭하면 표시되고 사라지는 구성 오버레이를 만들고 싶습니다. 아이디어는이 오버레이가 일부 텍스트와 일부 HTML 양식 요소를 포함한다는 것입니다.

오버레이를 만드는 방법을 알고 있지만 내 투쟁은 모바일에서 제대로 표시되도록하는 방법입니다. 그것은 나의 이해는이 페이지를 렌더링하는

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

입니다 : 일반적으로 웹 사이트가 책임감 모바일에 행동 할 때하고는 그것에 대해 이동하는 일반적인 방법은 다음과 같이 통해, 모바일 작게 뷰포트를 설정하여 것 같다 실제로는 모바일 장치가 900 픽셀 너비의 스크린과 같은 것을 가지고 있다고해도 그것이 320 픽셀 너비와 같은 것일뿐입니다.

이 솔루션을 사용할 때 문제는 전체 화면 Three.js 장면을 렌더링 할 때 320 픽셀의 폭을 사용하고 퍼지 이미지로 끝납니다.

내 Three.js 장면의 렌더링에 대한 전체 정의 품질을 유지하면서 휴대 기기의 크기가 작아 지도록 내 오버레이/구성 양식의 뷰포트를 설정하는 방법을 알고 싶습니다.

Answer 1

댓글에 따라 문제는 고해상도 화면에서 픽셀 비율로 보입니다.

renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(window.innerWidth, window.innerHeight);