🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

22.07.01 11:30 작성 조회수 200

0

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

답변 1

답변을 작성해보세요.

0

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의 경우도 별도의 컨트롤을 사용하고 있지 않아서 그냥 우클릭으로 이미지를 저장하실 수 있답니다.

채널톡 아이콘