2019년 25가지 Three.js 예제

 

Threejs를 통해 개발자는 복잡한 3D 애니메이션을 웹 사이트로 가져올 수 있으며 외부 플러그인없이 쉽게로드 할 수 있습니다. Javascript를 사용하여 3 차원 요소를 만들 수 있지만 threejs를 사용하면보다 복잡한 디자인을 수행 할 수 있습니다. threejs에는 입체 효과, 카메라 각도 조정 및 기하학적 모양과 이미지 사용 기능과 같은 유용한 기능이 많이 있습니다. 우리는 threejs 기능을 가장 많이 사용하는 독특한 threejs 예제를 발견했습니다. 일부 개발자도 three-js를 사용하여 미니 게임을 제공 했으므로이 목록에 제공된 모든 예제를 확인하십시오. 이 threejs 예제는 모두 여러분과 같은 전문 개발자에 의해 개발되었으므로 걱정없이 코드를 활용할 수 있습니다.

 

 

 

TinyPolyWorld

Tiny Poly 월드는 폴리곤 아트 기반 디자인입니다. 제작자는 우리에게 아름다운 다각형 예술 풍경과 빈티지 비행기를주었습니다. 애니메이션 현명한 단순한 끝없는 루프 디자인, 지상에 비행기의 그림자는 디자인에 현실적인 터치를 제공합니다. 애니메이션 이외에도 개발자는 커서 이동에 따라 평면이 대화식으로 이동하도록했습니다. 이 threejs의 깔끔한 심플한 디자인은 로딩 애니메이션 으로 사용될 수 있습니다 . 코드 스크립트 자체에서 개발자가 Javascript 속성을 주로 사용하고 CSS3 행을 사용하여 결과를 구체화했음을 분명히 알 수 있습니다. 이 간단한 코드 구조로 인해이 디자인에서 쉽게 작업 할 수 있습니다.

 

 

양모의 고양이 대 공

양모의 고양이 대 공은 threejs를 사용하여 만든 재미있는 개념입니다. 개발자는이 디자인에 생생한 고양이를주었습니다. 모양 공을 가까이 가져 오기를 기다립니다. 이 디자인에서는 고양이의 작은 제스처가 신중하게 수행되어 고양이에게 생동감을 불어 넣습니다. 바운싱 효과는 커서를 빠르게 움직일 때 대화 형 느낌을주는 모직 공에 사용됩니다. 이전 threejs 예제와 마찬가지로이 예제는 주로 Javascript와 몇 줄의 CSS 코드를 사용하여 결과를 구체화합니다. 정말로 시간을 죽이고 싶다면이 애니메이션이 도움이 될 것입니다. 이 디자인 예제는 오류 페이지 템플릿에 크게 추가되어 사용자가 오류 페이지를 칠 수 있도록 도와줍니다.

 

 

 

 

사자를 진정

Chill the Lion은 또 다른 활기 넘치는 캐릭터 기반 threejs 애니메이션 예제입니다. 이 예에서는 페이지 중앙에 친절한 사자가 앉아 있습니다. 사자와 친구가 되려면 팬을 켜고 사자 주위를 회전해야합니다. 개발자는 사자에게 편안한 얼굴 반응을 가져 오는데 탁월한 역할을했습니다. 사자의 갈기 사이의 공기 흐름을 자세히 설명하면이 디자인이 더 매력적입니다. 위의 고양이와 마찬가지로이 큰 고양이도 커서 움직임으로 머리를 움직입니다. 개념적으로는 Cat과 Lion 디자인이 동일하지만 애니메이션 효과가 다릅니다.

 

 

 

숲에서 급하게 돌진

아름다운 풍경을 만들기 위해 three.js 예제를 찾고 있다면이 예제가 인상적입니다. 이 예제의 제작자는 작은 강류를 만들었으며 다각형 모양을 잘 처리하여 풍경을 자연스럽게 보여줍니다. 기본 디자인에서는 더 나은보기를 위해 이미지와 상호 작용하거나 영역을 이동할 수 없습니다. 그러나 원하는 기능을 추가하기 위해 코드를 편집 할 수 있습니다. 이 예제를 작성하는 데 사용 된 코드 스크립트는 CodePen 편집기에서 직접 공유됩니다. 따라서 프로젝트에서 코드를 구현하기 전에 결과를 편집하고 시각화 할 수 있습니다.

 

 

 

 

3D의 많은 아이콘

이 예제의 제작자는 인상적인 threejs 예제를 제공했습니다. 여러 입자를 사용하여 단어 나 모양을 만드는 threejs 예제를 찾고 있다면이 코드 조각이 도움이 될 것입니다. 이름에서 알 수 있듯이 제작자는 아이콘을 사용하여이 아름다운 3D 애니메이션을 만들었습니다. 컨셉 모델이기 때문에 애니메이션이 자동으로 발생하며이를 제어 할 수 없습니다. 이 애니메이션에 다른 유형의 전송 또는 단어를 추가하려면 몇 줄의 코드를 편집하여 수행 할 수 있습니다. 또는이 코드 스 니펫을 기본으로 사용하여 사용자 정의 다중 아이콘 / 요소 3D 애니메이션을 만들 수 있습니다.

 

 

 

 

THREE.js 오디오 비주얼 라이저

이 목록의 threejs 예제는 대부분 문자 또는 입자를 기반으로 수행됩니다. 이 예제에서 제작자는 오디오 비주얼 라이저 개념을 사용했습니다. 재생 버튼을 누르 자마자 비트에 따라 파티클이 움직이고 켜집니다. 이 효과를 음악 플레이어에 결합하여 청중을 놀라게 할 수 있습니다. 코드 스크립트는 개발자가 깔끔하게 처리하므로 코드를 쉽게 이해하고 디자인에 구현할 수 있습니다. 미친 음악 플레이어 디자인에 관심이 있다면 HTML 음악 플레이어 디자인 컬렉션을 살펴보십시오 .

 

 

 

 

애니메이션 상자

이것은 오디오 비주얼 라이저 개념과 유사하지만 위에서 언급 한 THREE.js 오디오 비주얼 라이저 예제와 같이 동적이 아닙니다. 대부분의 다른 threejs 예제와 마찬가지로이 예제도 자동으로 애니메이션을 적용하며 액션이 트리거 될 때까지 기다리지 않습니다. 이 예제의 제작자는 상자를 패닝하고 볼 수있는 옵션을 제공했습니다. 패닝 옵션이있는 Threejs 예제는 사용자가 디자인을 완전히 즐길 수 있도록 도와줍니다. 예를 들어 threejs를 사용하여 건설 웹 사이트 에서 건물 모델을 작성하는 경우 사용자는 세부 정보를 철저히 볼 수 있습니다. 컨셉 모델 일 뿐이지 만이 디자인을 프로젝트의 영감으로 사용할 수 있습니다.

 

 

 

 

Crossy Road Threejs 예제

이 예제의 제작자는 대화식 threejs 디자인을 만들었습니다. 이 예제는 다소 아케이드 게임과 비슷하며 완벽하게 작동합니다. threejs를 사용하여 청중을위한 대화식 공간을 만들 계획이라면 이와 같은 threejs 예제가 영감을 줄 수 있습니다. 게임 모델이기 때문에 코드 스크립트는 약간 복잡하지만 쉽게 이해할 수 있습니다. 코드를 약간만 조정하면이 threejs 기반 게임을 웹 사이트 나 응용 프로그램에 완벽하게 맞출 수 있습니다.

 

 

 

 

MrDoob 공물

MrDoob에 대한 공물은 순수한 threejs 기반 애니메이션 예제입니다. 개발자가 더 나은 경험을 할 수 있도록 여러 가지 상호 작용 옵션을 제공했습니다. 예를 들어 큐브를 확대하고 다른 방향으로 패닝 할 수 있습니다. 큐브 큐브 내부를 확대 / 축소 할 때 큐브를 명확하게 볼 수 있도록 각 큐브는 신중하게 설계되었습니다. 데모이므로 개발자는 클러스터를 사용하여 이미지를 만들지 않았습니다. 창의성을 높이기 위해 클러스터를 사용하여 로고나 제품을 표시 할 수 있습니다. 순수한 threejs 디자인이기 때문에이 디자인을 처리하는 것은 개발자에게 쉬운 일입니다.

 

 

 

 

Threejs 입자 폭발

사용자에게 빅뱅 경험을 제공하려는 경우이 디자인이 인상적입니다. 이름에서 알 수 있듯이 입자 폭발 애니메이션이 있습니다. 어디를 클릭하든 화면에 화려한 폭발이 나타납니다. 은하계 배경 에서 입자 폭발은 마법처럼 보입니다. 단순한 애니메이션 효과이므로 홈페이지 헤더 섹션에서이 디자인을 사용하여 사용자에게 깊은 인상을 줄 수도 있습니다. 기본 데모는 전체 페이지를 사용하지만 원하는 크기로 쉽게 확장 할 수 있습니다. 코드를 약간 조정하면 웹 사이트에서이 디자인을 쉽게 사용할 수 있습니다.

 

 

 

 

Three.js + 트윈 맥스

이것은 threejs와 tweenmax 스크립트를 사용하여 만들어진 실험적인 디자인입니다. 정사각형 카드 클러스터가 결합되어 큰 정사각형을 만듭니다. 각 사각형은 개별적으로 뒤집어지고 매력적인 외관을 제공합니다. 디자인에는 2 차원 카드가 있지만 카드 뒤집기 애니메이션에서는 3 차원으로 보입니다. 컨셉 모델이기 때문에 개발자는 모호한 디자인을 제공했습니다. 뒤집기 카드의 이미지를 사용하여 콜라주 디자인을 사용자에게 제공하여이 디자인을 꾸밀 수 있습니다. 이 개념을 사용하면 사진 웹 사이트에 완벽하게 추가됩니다 .

 

 

 

 

마이티 피쉬

Mighty fish는 위에서 언급 한 Chill the Lion 디자인 개발자와 동일한 개념 모델입니다. 이 디자인에서도 동일한 코드 품질과 코드 구조를 기대할 수 있습니다. 이 디자인에서 개발자는 다른 개념을 사용했습니다. 커서를 왼쪽 끝으로 움직이면 물고기가 천천히 부드럽게 수영합니다. 커서를 오른쪽 끝으로 점차 움직이면 물고기가 빠르게 헤엄 치고 모양도 바뀝니다. 변형과 색상 변경 효과가 매우 매끄 럽기 때문에 사용자는이 강력한 물고기와 함께 시간을 보내는 데 더 나은 경험을 갖게됩니다.

 

 

 

 

Threejs를 사용한 3D 큐브 루프

3D 큐브 루프는 로딩 애니메이션의 또 다른 재미있는 개념입니다. 큐브는 계속 접 히고 확장되어 큰 큐브를 만듭니다. 작은 튀는 애니메이션은 변형 단계에서 유동적 인 애니메이션 효과를주기 위해 사용됩니다. 데모 모델이므로 개발자는 색상을 사용하지 않았습니다. 그러나이 디자인을 더욱 매력적으로 만들기 위해 색상을 사용할 수 있습니다. 위에서 언급 한 대부분의 다른 threejs 디자인과 마찬가지로이 코드도 대부분 threejs 코드 스크립트를 사용합니다. 카메라 각도는 직교 뷰로 유지되므로 가시성을 높이기 위해 로고를 맨 위에 추가 할 수 있습니다.

 

 

 

 

ThreeJS 그라디언트

ThreeJS Gradient는 화려한 입자 스타일 디자인입니다. 주위에 고리가있는 중심의 큰 구체는 원자와 분자를 상기시킬 수 있습니다. 디자인을 더욱 매력적으로 만들기 위해 산란 된 삼각형 요소가 중심 원자 부분을 중심으로 회전합니다. 디자이너는 디자인에 현대적인 느낌을주는 다각형 아트 스타일 디자인을 따랐습니다. 이 디자인이 놓친 것은 대화 형이 아니라는 것입니다. 개발자가 위에서 언급 한 몇 가지 디자인과 같이 커서 이동을 위해 대화식으로 만들었다면 훌륭했을 것입니다. 그러나 걱정하지 마십시오. 여전히 코드가 있으며 원하는 기능을 추가 할 수 있습니다.

 

 

 

 

드래곤 재채기

재채기 드래곤은 대화 형 재미있는 threejs 애니메이션 예제입니다. 개발자는 실제로이 threejs 예제에서 미니 게임을 제공했습니다. 99를 칠 때까지 계속 클릭하면 드래곤이 불을 재채기합니다. 클릭이 강할수록 화재 호흡이 강력 해집니다. 애니메이션 효과를 명확하게 시각화 할 수 있도록 개발자가 카메라 각도를 패닝 할 수있는 옵션을 제공했습니다. 유동적 인 애니메이션 효과로 인해 사용자는 몰입 형 경험을 얻을 수 있습니다. 이와 같은 요소는 게임 웹 사이트 템플릿에 완벽하게 추가되며 사이트 의 게이머에게 즐거운 놀라움을 줄 것입니다.

 

 

 

 

거룩한 실행중인 암소

성스러운 소는 위에서 언급 한 드래곤 애니메이션 제작자와 동일합니다. 이것은 드래곤 애니메이션처럼 대화식이 아니지만 여전히 좋습니다. 카메라를 돌리고 매달려있는 젖소를 보는 것만으로도 끊임없이 움직입니다. 이 단순하고 깔끔한 애니메이션 디자인을 위해 개발자는 threejs와 CSS3 스크립트를 사용했습니다. CSS3 스크립트를 사용하면 화려한 요소와 부드러운 애니메이션 효과를 얻을 수 있습니다. 원하는 경우 고유 한 기능을 추가하여 디자인을 더욱 대화식으로 만들 수 있습니다. 코드 스크립트에 대한 실습 경험을 얻으려면 아래 정보 링크를 확인하십시오.

 

 

 

 

Three.js 큐브

Three.js 큐브 개념은 위에서 언급 한 MrDoob 디자인에 대한 공물과 거의 유사합니다. 그러나이 디자인은 다른 효과와 마무리를 가지고 있습니다. 회전 큐브는 동기식으로 움직여 매혹적인 효과를줍니다. 사실적인 느낌을주기 위해 개발자는 회전 큐브에 그림자 효과를 사용했습니다. 커서를 위아래로 움직여 회전 큐브 클러스터를 확대 및 축소 할 수 있습니다. 큐브의 배치는 상호 작용하기가 거의 없으므로 프로젝트에서 큐브를 사용하기 전에 수정해야 할 수도 있습니다. 이것은 또한 순수한 threejs 기반 디자인으로, 정교한 결과를 제공하기 위해 개발자는 CSS3 및 Haml 스크립트의 몇 줄을 사용했습니다.

 

 

 

 

편집증 대 수줍은 새

편집증 대 부끄러운 새는 위에서 언급 한 Sneeze the Dragon 디자인 제작자의 재미있는 개념입니다. 이 디자인에서 중앙 새가 다른 두 마리의 새를 보면 머리를 돌립니다. 세 마리의 새 움직임이 모두 올바르게 동기화되어 새의 사실적인 눈과 목 움직임을 얻습니다. 새에 그림자를 추가하는 것은 디자인에 또 다른 멋진 터치입니다. 이 디자인의 가장 중요한 부분은 디테일링입니다. 예를 들어 새의 그림자에서 적절한 움직임을 볼 수 있습니다. 이 완벽한 threejs 애니메이션을 사용하려면 프로젝트에서이 코드를 바로 사용할 수 있습니다.

 

 

 

 

Webgl 로더 무한 루프

Webgl 로더 무한 루프는 로딩 애니메이션에 사용할 수있는 간단한 개념입니다. 무한 큐브 루프 디자인은 부드럽게 움직이고 하단 큐브의 그림자도 그에 따라 변경됩니다. 원하는 경우 큐브에 색상을 추가하여 디자인을 꾸밀 수 있습니다. 기하학적 모양은 현대적인 유명한 디자인 트렌드 중 하나이므로 일부 브랜드에는 기하학적 모양 로고가 있습니다. 로고 디자인이 하나 인 경우이 디자인에서이를 사용하여 웹 사이트를 명확하게 브랜드화 할 수 있습니다. 개발자는 CSS3 및 threejs 스크립트를 모두 사용하여이 디자인을 만들었습니다. 두 스크립트 모두 최신 스크립트이므로 디자인 요구에 따라 트렌디 한 색상과 효과를 추가 할 수 있습니다.

 

 

 

 

사이키델릭 웨이브

사이키델릭 웨이브는 매끄럽고 화려한 threejs 디자인 예제입니다. 이 애니메이션 화려한 화면은 노치 디자인 의 새로운 iPhone 에서 멋진 화려한 라이브 배경 화면을 상기시킬 수 있습니다 . 화면의 색상이 다채로운 유체 경험을 제공하기 위해 움직입니다. 고해상도 화면에서이 디자인을보고 있다면이 디자인을 좋아할 것입니다. 개발자는 애니메이션 효과를 조정하기 위해 오른쪽 상단에 컨트롤을 제공했습니다. 이 다채로운 사용자 친화적 인 디자인을 만들기 위해 개발자는 threeJs, CSS3 및 HTML 스크립트를 사용했습니다. 이것은 개념 설계 일 뿐이므로이 설계를 프로젝트에 적합하게하려면 수동으로 작업해야합니다.

 

 

 

 

지형 편집기

Terrain Editor는 또 다른 흥미로운 디자인 컨셉입니다. 직사각형 요소의 스택이 함께 그룹화되어 큰 다채로운 큐브를 형성합니다. 큐브 표면을 클릭하면 직사각형 요소가 올라갑니다. 길게 클릭할수록 요소가 높아집니다. 이 디자인 컨셉은 초고층 건물처럼 보이기 때문에 건축 웹 사이트에 완벽하게 추가됩니다 . 기본 설계에서 건물 입방체를 올리려면 클릭해야합니다. 그러나 주기적 간격으로 자동으로 올릴 수 있습니다. 개발자가 코드 구조를 올바르게 처리하여 코드를 쉽게 편집하고 프로젝트에서 사용할 수 있습니다.

 

 

 

 

입자 파

Particles Waves는 threejs를 사용하여 만든 편안한 애니메이션입니다. 물결 모양의 부드러운 부드러운 색상과 입자의 부드러운 움직임은 멋진 느낌을줍니다. 마우스를 사용하여 카메라보기를 조정하는 옵션이 있습니다. 그러나 필요한 경우 자신의 상호 작용을 추가하여 디자인을 더욱 흥미롭게 만들 수 있습니다. 이 디자인은 순전히 CSS3 및 threejs 스크립트를 사용하여 이루어집니다. 간단한 코드 구조를 통해 다른 개발자가이 코드를 쉽게 활용하고 자신 만의 맞춤형 디자인을 만들 수 있습니다. 몇 가지 최적화를 통해이 예제를 전문 디자인에 완벽하게 맞출 수 있습니다.

 

 

 

 

도시 3D

City 3D는 건축 및 건축 웹 사이트를 위한 가장 완벽한 threejs 예제 중 하나입니다 . 이 디자인에서는 빨간색 배경에 고층 빌딩의 실루엣 이미지가 나타납니다. 이 threejs 디자인의 고급스러운 외관은 모든 비즈니스 웹 사이트에 완벽하게 어울립니다. 홈페이지 헤더 섹션에서 이와 같은 요소를 사용하여 인상적인 소개를 제공 할 수 있습니다. 개발자는 마우스 움직임의 크기를 적절하게 조정하여 사용자가 디자인의 세부 사항을 명확하게보고 즐길 수 있습니다. 이 아름다운 디자인을 만들기 위해 개발자는 threejs, CSS3 및 HTML 스크립트를 사용했습니다. 요구 사항에 따라 코드 구조를 최적화하기 만하면됩니다.

 

 

 

 

세 가지 입자 모핑 텍스트

이름에서 알 수 있듯이이 디자인에는 텍스트 모핑 효과가 있습니다. 이 디자인의 유일한 단점은 개발자가 제공 한 기본 단어로만 디자인을 즐길 수 있다는 것입니다. 이 디자인을 동적 인 디자인으로 만들려면이 코드를 기본으로 유지하여 수동으로 작업해야합니다. 개발자는 코드 스크립트를 올바르게 처리하여 문제없이 고유 한 기능과 옵션을 추가 할 수 있습니다. 특히 텍스트 효과를 찾고 있다면 이 threejs 예제와 같은 멋진 효과가있는 CSS 텍스트 효과 컬렉션을 살펴보십시오 .

 

 

 

 

레이 캐스터

Raycaster에서는 현대적인 웹 사이트에서 사용할 수있는 미래형 공상 과학 디자인을 사용합니다. 웹 사이트에서 대화 형 페이지를 만들고 싶다면 이와 같은 threejs 예제가 완벽한 옵션이 될 것입니다. 이 디자인에서 다각형 모양을 사용하여 주요 회전 요소를 만듭니다. 밝은 색상과 어두운 색상이 회전 요소를 사실적으로 보이도록 사용됩니다. 은하계 배경에서이 요소들은 유성처럼 보입니다. 각 요소는 독립적으로 회전하지만 마우스 포인터를 움직이면 클러스터로 움직입니다. 이 디자인에는 다른 대화식 기능이 제공되지 않지만 원하는 경우 디자인에 추가 할 수 있습니다.

 

 

 

 

출처 : https://uicookies.com/threejs-examples/