인프런 커뮤니티 질문&답변

이동헌님의 프로필 이미지
이동헌

작성한 질문수

Three.js로 시작하는 3D 인터랙티브 웹

수강전 문의 드렸었는데요 canvas 이미지 캡쳐 관련

작성

·

244

0

사전 질문에 답변을 주셨는데 다시 좀 문의드려봅니다.
 
three.js 를 이용하여 화면을 구성하고
html2canvas 와 php 를 이용해서 테스트를 해보았습니다.
canvas 내의 화면을 캡쳐해서 저장하는 것은 되는데 문제는 3D 오브젝트는 함께 저장이 되지 않더라구요.
다만 공식 홈페이지에 보면 마우스 우클릭 하면 3D 오브젝트를 2D 이미지로 다운로드가 가능하던데요.
 
http://www.bluemedia.co.kr/test/examples/#webgl_animation_skinning_blending
 
우측 하단에 보면 이미지저장 버튼과 저장 후 볼 수 있는 저장된 이미지 보기 링크가 있습니다
 

답변 1

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

OrbitControl 등을 사용하면 마우스 오른쪽클릭이 동작하지 않더라고요~
그래서 따로 아래처럼 이벤트를 이용해 처리해주실 수 있습니다.

document.onpointerdown = function(e) {
		switch (e.button) {
			case 0: console.log('좌클릭'); 
				break;
			case 1: console.log('가운데클릭'); 
				break;
			case 2: console.log('우클릭');
				break;
		}
	}

https://studiomeal.com의 경우도 별도의 컨트롤을 사용하고 있지 않아서 그냥 우클릭으로 이미지를 저장하실 수 있답니다.

이동헌님의 프로필 이미지
이동헌

작성한 질문수

질문하기