중간에 구가 있고 그 주위를 돌고있는 카메라가있는 장면이 있습니다. 이제 Three.JS가 예를 들어 구가 왼쪽이나 오른쪽에 나타날 수 있도록이 뷰포트의 작물을 만드는 것이 가능한지 궁금합니다.three.js에서 뷰포트를자를 수 있습니까?
저는 구를 왜곡시킬 것이기 때문에 카메라를 움직이거나 구 이외의 지점을 바라 보지 않고 렌더링의 클립이나 자르기를 기대합니다.
이것이 가능합니까?
하나 개의 잠재적 인 솔루션은 다음 블리 팅에 의해 두 번째 캔버스로 three.js를 장면을 다시 그려, 당신의 Three.js를 캔버스 위에 두 번째 캔버스를 배치하는 것입니다 :
는overlayCanvas.getContext('2d').drawImage(threeCanvas, 40, 40, 960, 960, 0, 0, 1200, 1200);
당신은 매개 변수에 대한 자세한 내용을보실 수 있습니다 documentation에서 drawImage()를 사용하지만,이 작업은 three.js 캔버스의 특정 영역을 자르고 두 번째 캔버스의 더 넓은 영역 위로 늘리는 것입니다. 장면을 두 번째로 렌더링하는 것보다 훨씬 빠르며 원하는 크기로 표시됩니다 (약간의 스트레칭이 있음에도 불구하고).
보기로 잘라내려는 영역이 보조 캔버스와 동일한 크기가되도록 일반적으로 표시되는 것보다 큰 원본 (세 .js) 장면을 그려서 늘이기를 줄일 수 있습니다.
이 예제가 도움이됩니까? (내 컴퓨터의 Safari에서는 실패합니다.) http://threejs.org/examples/webgl_materials_texture_filters.html – WestLangley
아 그래, renderer.scissorTest() 및 renderer.setScissor() - 함수에 주목했습니다. 그래서, '가위'는 셋입니다 .JS의 뷰포트 자르기 용어는 무엇입니까? –
뷰포트의 일부를 마스킹하는 용어 용어입니다. 캔버스는 동일한 크기로 유지되며 장면은 "왼쪽으로 이동하지 않습니다"라는 점에 유의하십시오. – WestLangley