웹 사이트 - 동적 이미지 배치 (목업)

Question

웹 사이트 개발 이외에도 저는 그래픽 디자이너입니다. visual identity에서 작업 할 때 내 고객에게 디자인을 보여주기 위해 종종 Mockups을 사용합니다.

실물 모형 또는 실물 크기 모형은 교육, 시범, 디자인 평가, 판촉 및 기타 목적으로 사용되는 디자인 또는 장치의 축척 또는 풀 사이즈 모델입니다. DEVELOPPEMENT 간단한보다 훨씬 무거운이기 때문에 나는 curently e-commerce website에서 일하고 있어요

단지, 자신을 훈련 : 여기

는 모형이 어떻게 생겼는지의 몇 가지 예입니다 쇼케이스 웹 사이트. User Experience을 개선하기 위해 위에 표시된대로 interactive mockups을 수행하는 방법을 포함하고자합니다.

내가 마음에있는 것은 visualise a picture on a frame whitin a room으로가는 길입니다. 그렇게 보일 것이다

뭔가 :

그리고 그런 각 벽과 프레임, (단지 추한 예)에 대한 customed 수 :

문제는, 기초, 나는 진짜로 실시간으로 이런 종류의 시뮬레이션을 개발하는 what to use 모르겠다 (사용자가 단순히 그림을 업로드하고 그림이 컨테이너에 맞을 것이다). 내가 Javascript와 배경 이미지를 바꿀 것이다 간단한 div의와 컨테이너를 만들기

• : 여기 내가 이미 생각 것입니다.

• 내가 가진 두번째 생각은 만드는 것입니다 : 사진이 이미지에 쇼 같이 perspective을 따르지 것처럼 내 요구에 응답하지 않을 그래도 쉬운의 종류는해야 할 일 3D의 방은 조금 더 힘들 겠지만 너무 심하지는 않습니다. 하지만이 경우에는 웹상에서 change a 3D model texture하는 방법에 대한 단서가 없습니다. 거기에는 패키지와 frimware가 있어야한다고 가정합니다. jquery으로, 어쩌면?

• 마지막으로 Image를 생성하기 위해 PHP GD을 사용하는 것에 대해 생각했지만 마지막으로 사용한 경우에는 그렇게 고통 스러웠습니다. 그리고 나는 그것이 "persective like"질감을 생성 할 수 있다고 생각하지 않습니다.

그래서 제 질문은 what firmware/tool 너희들이 그렇게 저를 조언 할 수있다. 그리고 귀하의 의견은 between using a 3D model and a static Image입니까? best options은 무엇입니까?

매우 긴 게시물을 위해 죄송합니다. 나는 가능한 한 분명하고 싶었다.

편집 : WebGL와

아마 뭔가?

Answer 1

아마도 three.js를 찾고있을 것입니다. 3D 객체를 렌더링하는 WebGL 라이브러리입니다. 평면과 박스와 같은 프리미티브로 시작하여 이미지 나 색상을 사용하여 텍스처를 변경할 수 있음을 보여 주셨습니다. 프로젝트에서 개체를 가져와야하면 쉽게 내보낼 수 있습니다.

Answer 2

간단한 CSS transform: translateZ();으로 충분해야합니다. MDN - CSS perspective을보십시오.

브라우저에서 100 % 지원하지는 않지만 83% is acceptable이 가장 간단한 방법임을 유의하십시오.