웹 디자인에서 3D의 9 가지 훌륭한 사용

웹상의 3D는 플러그인을 사용하지 않고 호환되는 브라우저 내에서 3D 그래픽을 렌더링하기위한 JavaScript API 인 WebGL의 출시와 함께 2011 년에 출시되었습니다. 그리고 다음 해에 웹 디자이너들 사이에서 3D의 가능성에 대한 많은 흥분을 보았습니다.

그 초기의 과대 광고는 최근 몇 년 동안 사라 졌을 수 있습니다. 그러나 온라인 3D의 개발은 빠르게 진행되고 있으며 꽤 인상적인 구현이 있습니다. 주로 개념 증명 역할을하는 '와우 팩터'비주얼부터 훌륭한 웹 경험을 만들기위한 3D의 세심한 사용까지.



이 게시물에서는 웹에서 최근 3D 사용 (작고 미묘하고 화려하고 서사시)을 나열하여 프로젝트에 영감을줍니다. 아, 그리고 야생에서 발견 한 3D의 훌륭한 사용이 있다면 댓글에 링크를 공유해주세요.



01. Acko.net

개발자 Steve Wittens의 웹 사이트를위한 길고 구불 구불 한 헤더

개발자 Steve Wittens의 웹 사이트를위한 길고 구불 구불 한 헤더

브라우저 기반 3D가 웹에 제공 할 수있는 예를 찾고 있다면 웹 개발자 Steven Wittens의 개인 사이트 인 Acko.net을 참조하십시오. 거리 예술에서 영감을받은 아름다운 애니메이션 헤더가 특징입니다. 단순한 아이디어지만 훌륭하게 실행되었습니다.



Wittens는 CSS 3D와 WebGL의 조합을 사용하여 만들었습니다. '각 리본의 비틀림은 임의로 생성되는 것이 아니라 수학적으로 유도됩니다.'라고 그는 설명합니다. “병렬 전송의 차동 원리를 구현합니다. 위쪽 방향은 각 곡선에 평행하게 변경되므로 리본이 제자리에서 회전하지 않습니다. 그들은 자연스럽게 원할 때만 돌립니다. 따라서 디자인 종류는 자체 의지가 있습니다.”

그가 그것을 어떻게 조합했는지에 대한 전체 이야기를 읽을 수 있습니다. 이 블로그 게시물 . 애니메이션이 브라우저에서 작동하지 않으면 다음에서 확인할 수 있습니다. 이 비디오 .

02. 캄포 알레 혜성

수상 경력에 빛나는이 와인 웹 사이트를 통해 환상적인 세계로 들어 가세요



수상 경력에 빛나는이 와인 웹 사이트를 통해 환상적인 세계로 들어 가세요

2 월에 시작된이 웹 사이트는 이미 수많은 상을 수상했으며 그 이유를 알기 어렵지 않습니다. 이탈리아 와인 캄포 알레 코 메테를 홍보하기 위해 만들어졌으며, '꿈과 마법이 마침내 만날 수있는'3D 떠 다니는 도시를 묘사합니다. 구현의 부드러움과 결합 된 디자인의 상상력은 놀라 울 정도로 놀랍습니다. 마우스를 사용하여이 환상적인 세계를 둘러 보는 것은 정말 즐거운 일입니다.

  • 삶을 편하게 만들어주는 7 가지 새로운 그래픽 디자인 도구

이탈리아 스튜디오에서 제작 모노 그리드 , 웹에서이 훌륭한 3D 사용은 three.js 및 AngularJS와 함께 WebGL 및 GSAP를 사용하여 만들어졌습니다.

03. Stripe.com

결제 플랫폼 Stripe의 사이트에서 간단하지만 효과적인 3D 구현

포토샵에서 배경 크기를 조정하는 방법
결제 플랫폼 Stripe의 사이트에서 간단하지만 효과적인 3D 구현

훨씬 더 간단한 3D 구현 인이 대화 형 회전 정 이십 면체는 멋지고 독창적 인 방식으로 다양한 메뉴 옵션을 제공하는 데 매우 효과적입니다. 결제 플랫폼 Stripe의 사이트에 소개 된이 제품은 Stripe에서 제품 마케팅을 담당하는 Krithika Muthukumar의 아이디어를 바탕으로 Bill Labus가 설계했습니다.

Labus는 '그녀는 기계 학습을 사용하여 수신 요금을 평가하고 합법적이거나 사기성 일 가능성을 예측하는 Radar의 관점에서 Stripe 요금을 시각적으로 나타내는 방법을 구상하고있었습니다.'라고 설명합니다. '머신 러닝은 그 성격 상 상당히 추상적이므로 3D 개체는 개념을보다 실감 나게 만드는 효과적인 방법으로 보였습니다.'

기계 학습은 본질적으로 매우 추상적이므로 3D 개체는 개념을보다 실감 나게 만드는 효과적인 방법으로 보였습니다.

Bill Labus

이를 위해 사용되는 기본 기술은 WebGL이지만 상당히 낮은 수준의 API라고 Labus는 말합니다. “우리는 WebGL을 추상화하고 객체로드, 조명 및 재료 설정 등을 더 쉽게 만드는 상위 프레임 워크로 three.js를 선택했습니다. 사실, 우리는 three.js가 기본적으로 내장 된 프리미티브 중 하나로 정 이십 면체를 기본으로 포함하고 있다는 사실을 알게되어 운이 좋았습니다.

“초기 버전은 단순히 내장 된 프리미티브를 사용했습니다. 그러나 나중에 다른 곳의 기존 3D 미적 사용과 더 잘 어울리도록 모양의 둥근 모서리를 원하기로 결정했습니다. stripe.com , 그래서 우리는 Cinema4D에서 둥근 이십 면체를 렌더링하고 그것을 three.js에 객체로로드했습니다. 요금의 다양한 속성을 나타내는 정점 레이블은 3D 환경에서 렌더링되지 않고 3D 캔버스 위의 일반 HTML 요소로 렌더링됩니다. 이는 텍스트에 대해 최고 품질의 렌더링을 보장하고 현지화를 더 쉽게하기위한 것입니다.

“20 면체를 애니메이션 할 때 정점의 위치와 정점이 현재 오브젝트 뒤에 표시되는지 또는 가려 지는지 여부를 계산 한 다음 해당 정보를 사용하여 레이블 요소의 위치를 ​​지정하고 표시 / 숨 깁니다.

“3D 환경에서 렌더링되지 않는 또 다른 요소는 물체에 의해 투사되는 그림자입니다. 충분히 확산 되었기 때문에 간단히 블러 처리 할 수있었습니다. 3D 캔버스 뒤에는 그림자의 모양이 정 이십 면체의 모양과 완벽하게 일치하지 않는 것이 눈에 띄지 않습니다. 이는 주로 성능상의 이유로 수행되었습니다. 큰 확산 그림자는 일반적으로 특히 애니메이션 루프 내에서 렌더링하는 데 더 비싼 효과 중 하나이기 때문입니다. '

04. 다이앤 마르텔

회전 가능하고 스크롤되는이 타이틀은 재미있게 놀 수 있습니다.

회전 가능하고 스크롤되는이 타이틀은 재미있게 놀 수 있습니다.

이전에 스타 워즈 오프닝 크레딧 스타일의 웹 텍스트를 본 적이 있지만 결코 이렇지 않습니다. 미국 뮤직 비디오 감독이자 안무가 인 Diane Martel ( 'Blurred Lines'동영상으로 가장 잘 알려져 있음)의 웹 사이트는이 기기를 사용하여 자신의 홈페이지 전체에 작품 제목을 보여줍니다.

마우스를 사용하여 스크롤 할 때 비틀고 회전하거나 제목 위로 마우스를 가져가 더 많은 스틸을 표시하거나 클릭하여 전체 페이지를 볼 수 있습니다. 이 화려하고 인상적인 사이트는 Ben Wegsheider 자신의 웹 사이트에도 꽤 멋진 3D 트릭이 있습니다.

05. OS 맵

Ordnance Survey 맵이 3D로 전환됩니다.

Ordnance Survey 맵이 3D로 전환됩니다.

재미 있고 경박 한 3D 사용에서 완전한 기능적 사용에 이르기까지. 어제 영국의지도 제작 기관이자 세계 최대의지도 제작사 중 하나 인 Ordnance Survey는 수상 경력에 빛나는 OS Maps에 영국 시골의 정확한 3D 매핑을 소개하는 주요 업데이트를 제공했습니다.

영국의 언덕과 계곡을 가로 지르는 워커, 사이클리스트 및 기타 사람들에게 사랑받는 OS Maps는 웹과 앱을 통해 사용할 수 있습니다. “750,000 개가 넘는 경로가 저장되어 있으며 3D 요소는 경로를 더 잘 볼 수 있고 경로를 달성 할 수 있는지 여부에 대한 아이디어를 얻을 수 있음을 의미합니다.”라고 기자 Keegan Wilson은 밝힙니다.

포토샵에서 눈을 희게하는 방법

믿을 수 없을 정도로 정확한 레이저를 사용하여 매우 세밀하게 구성된 3D 매핑은 웹을 통해 OS Maps 가입자에게만 제공됩니다. 그러나 조사하고 살펴보고 싶은 사람은 7 일 무료 평가판을 통해 그렇게 할 수 있습니다.

06. 지구 2050

Kaspersky는 대화 형 3D 지구본을 사용하여 지구의 미래를 제시합니다.

Kaspersky는 대화 형 3D 지구본을 사용하여 지구의 미래를 제시합니다.

20 주년을 기념하기 위해 보안 대기업 Kaspersky는 사용자가 미래의 세계, 그것이 가져올 기회 및 야기 할 수있는 위협에 대해 토론하도록 초대하는 대화 형 프로젝트를 시작했습니다. 그 중심에는 모스크바 스튜디오가 지은 멋진 사이트 인 Earth 2050이 있습니다. 가능한 디자이너와 일러스트 레이터가 인터랙티브 포털을 통해 미래의 비전을 업로드하도록 초대합니다.

홈페이지에는 2050 년 생명체의 특정 측면에 대한 예측을 포함하는 각 지역별로 회전하는 지구가 있습니다. 모든 디자이너, 일러스트 레이터 또는 아티스트는 자신의 작품을 업로드 할 수 있으며 일반인은 특정 예측이 이루어질 것이라고 믿는지에 대해 의견을 말할 수 있습니다.

'우리의 컨셉은 Google Street View와 UFO 및 Civilization과 같은 PC 게임, Kaspersky Lab 자체의 미래적인 전망에서 영감을 받았습니다.'라고 Possible 팀은 설명합니다. '전 세계는 네이티브 WebGL, HTML5, CSS3, JS, WebGL 및 PHP 7을 사용하여 제작했습니다. 프런트 엔드 구축에는 대역폭 최적화 및 표준 브라우저 캐싱, 콘텐츠 모듈, 코딩, WebGL 모듈과 함께 행성, 브라우징 및 파노라마 편집이 포함되었습니다.'

포토샵에서 3D 텍스트를 수행하는 방법

07. 티 투안 마티스

개발자 Titouan Mathis는 재미있는 애니메이션 시리즈로 개인 사이트에 생명을 불어 넣습니다.

개발자 Titouan Mathis는 재미있는 애니메이션 시리즈로 개인 사이트에 생명을 불어 넣습니다.

프랑스 스트라스부르에 거주하는 웹 개발자 인 Titouan Mathis는 자신의 Twitter, Instagram 및 고용주 Studio Meta의 사이트에 연결하는 데 사용하는 매우 간단한 웹 사이트를 보유하고 있습니다. 하지만 그는 대화 형 애니메이션 3D의 재미있는 스플래시로 활기를 띕니다. 세 가지 연속적인 나선형 패턴으로 매우 세련되고 놀 수밖에 없습니다.

“주로 제가 하루 동안 접하는 것들에서 영감을 얻었습니다.”라고 Mathis는 설명합니다. “때때로이 모든 것들이 섞여서 내 머릿속에 아이디어가 떠 오릅니다. 나는 그것을 재현하고 모양과 상호 작용하는 좋은 방법을 찾기 위해 모양을 가지고 놀려고 노력할 것입니다.”

세 가지 애니메이션은 모두 HTML, CSS 및 JavaScript로 제작되었으며 Vue.js는 구조 측면에서 도움이되었으며 코드는 GitHub 당신이 그것을 확인하고 싶다면. Mathis는“가장 큰 기술적 과제는 성능이었습니다. “HTML, CSS 및 JavaScript에 익숙해지면 아이디어를 신속하게 프로토 타이핑 할 수 있지만 많은 DOM 요소에 애니메이션을 적용하면 브라우저에서 금방 무거워 질 수 있습니다. 다음 애니메이션은 확실히 Three.js 또는 유사한 라이브러리로 제작 될 것입니다.”

08. 마술사 시즌 2

Unit 9가 구축 한이 사이트에서 The Magicians의 판타지 세계를 탐색하세요

Unit 9가 구축 한이 사이트에서 The Magicians의 판타지 세계를 탐색하세요

이번에는 힙합 TV 판타지 쇼 The Magicians의 가상 세계에 대한 또 다른 인터랙티브 맵으로 이동합니다. 영국 대리점 9과 의 프로그래머 팀은 Three.js, WebGL 및 GLSL을 사용하여 사용자가 퀘스트를 시작하고 시즌 2에 대해 자세히 알아볼 수있는이 뛰어난 대화 형지도를 개발했습니다. 환상적인 생물에서 고대 신에 이르기까지 매주 퀘스트는 각 에피소드의 주제를 반영합니다. 쇼를 보지 않더라도 웹 3D의 몰입 형 사용은 여전히 ​​방문할만한 가치가 있습니다.

09. 소리 추구

프랑스 스튜디오 Biborg의 재미 있고 미친 게임

프랑스 스튜디오 Biborg의 재미 있고 미친 게임

우리는 그냥 재미있는 것으로 끝낼 것입니다. 이 미친 WebGL 실험에서 장애물을 피하고, 아이템을 포착하고, 미친 음악을 통해 자신 만의 사운드 트랙을 만드세요. 일반 데스크톱 / 모바일 사용자와 VR 애호가 (Google Cardboard와 호환)를 모두 대상으로하는이 제품은 파리 크리에이티브 에이전시의 3D 스마트를위한 훌륭한 쇼케이스입니다. 비보 그 . 플레이 할 때마다 환경이 다르고 중독성이 매우 강합니다.주의하세요!