작동 중인 Three.js의 놀라운 오픈 소스 예제 10가지

이상해 보일 수 있지만 실제로 JavaScript로 3D 개체를 만들 수 있습니다. 대부분의 웹 개발자는 이를 수행하기 위해 Three.js와 같은 라이브러리에 의존합니다.

그러나 모든 사람이 그것을 살펴보기 위해 귀찮게하지 않을 정도로 세부적인 프로세스입니다. 이제 3D JS에 대해 궁금하다면 다른 사람을 공부하는 것이 가장 좋은 학습 방법입니다. 이것이 바로 내가 이 갤러리를 만든 이유입니다.

다음은 CodePen에서 호스팅되는 최고의 Three.js 프로젝트 중 일부입니다. 그들은 당신의 창조적 인 모터 회전을 얻을 수있는 다양한 스타일과 특성을 갖추고 있습니다.

1. 낮은 폴리 지구

단일 HTML 요소와 수십 줄의 CSS/JS를 사용하여 개발자 Sam Saccone이 만든 이 낮은 폴리 어스가 있습니다.

처음에는 많은 것 같지 않을 수 있습니다. 그러나 그것은 내가 본 것 중 가장 눈에 띄는 아이디어 중 하나이며 사용자 정의 애니메이션 효과도 사용합니다. 땅덩어리는 심지어 지구에서 튀어나와 훨씬 더 사실적인 모습을 보여줍니다.

이전에 Three.js를 사용해 본 사람은 이것이 얼마나 멋진지 알 것입니다.

대부분의 경우 코드베이스가 더 작기 때문에 유사한 프로젝트보다 확실히 앞서 있습니다.

2. 구체

이 이상한 행성 같은 프로젝트는 또한 꽤 깔끔한 효과로 Three.js를 사용합니다. Spheres는 스타일러스 전처리기에서 실행되며 CSS로 가져온 것을 볼 수 있습니다.

또한 HTML 없이 실행됩니다. 이는 정말 보기에 좋습니다. 모두 JS, 모두 3D이며 모든 최신 브라우저에서 완벽하게 실행됩니다.

더 작은 구체는 JS 라이브러리의 기하학적 기능을 사용하여 더 큰 구체 위로 미끄러지듯 움직입니다. 이것이 가능하다는 것이 미친 것 같지만, 이는 우리가 CSS와 함께 얼마나 멀리 왔는지에 대한 증거입니다.

3. 행성의 자전

더 많은 행성 아이디어에 대해 알아보기 위해 개발자 Bryan Jones가 만든 이 미친 회전 은하가 있습니다.

또한 Three.js와 몇 가지 기본 CSS만 사용하여 행성의 스타일을 지정하고 구성합니다. 3D 효과는 놀랍습니다. 나는 아직도 이런 것들이 일반적인 웹 브라우저에서 가능하다는 사실에 머리를 감쌀 수가 없다!

그러나 이제 막 Three.js 영역에서 시작하는 경우 이 CodePen 스니펫이 훌륭한 학습 보조 도구라는 사실을 부인할 수 없습니다.

4. Three.js의 Treehouse 로고

온라인 학습 리소스인 Treehouse는 특히 초보자에게 매우 훌륭합니다. 강사 중 한 명인 Nick Pettit은 실제로 Three.js를 사용하여 전체 Treehouse 로고를 만들었습니다.

그리고 이것이 굉장하다고 말하겠습니다! 나는 이런 설정을 본 적이 없으며 이렇게 자세한 설명이 있는 펜은 거의 본 적이 없습니다. Nick의 코드를 사용하면 훨씬 더 쉽게 파고들고 이해하지 못하는 기능을 찾은 다음 Google에 답을 검색할 수 있습니다.

이 3D 로고에 대한 모든 것은 현대 JS가 구식이 아니라는 것을 증명해야 합니다.

힌트: 로고를 회전하려면 화면 위로 클릭+드래그를 시도하십시오. 재미있는 것들!

5. 나무 통

다음은 순수한 JS 코드를 사용하여 Nick Pettit이 개발한 또 다른 미친 스니펫입니다. HTML도, CSS도 없습니다. 모든 것이 JavaScript 언어를 통해 렌더링됩니다.

당연히 이것은 JavaScript 내부에서 생성할 수 있는 캔버스 요소에 의존합니다. 나는 그것을 약간 사용했지만 결코 이 수준에 도달하지 못했습니다. 견고한 3D 라이브러리로 얼마나 많은 일을 할 수 있는지 보여줍니다.

그리고 이것은 또한 Nick이 가르치는 방법을 정말로 알고 있다는 것을 증명합니다. 이것은 그의 CodePen 계정에 있는 많은 샘플 중 하나일 뿐입니다.

6. Three.js + TweenMax

개발자 Martand Kashyap은 TweenMax 스크립트와 Three.js를 결합하여 이 미친 것을 만들었습니다.

멋진 애니메이션 효과가 있는 이 목록에서 가장 독특한 펜 중 하나입니다. 패널은 실제로 평평한 2D 표면처럼 보이지만 뒤집는 애니메이션은 자연스러운 3D 효과를 만듭니다. 당신이 충분히 오래 쳐다보면 그것은 꽤 미치게 됩니다.

이것은 실제로 Martand가 JavaScript로 변환한 모션 그래픽 프로젝트를 기반으로 했습니다. 나는 이것을 훨씬 더 자주보고 있으며 꽤 인상적입니다.

7. 파티클 스타 필드

2D 표면에서의 모션 개념은 모든 종류의 시차 디자인을 떠올리게 합니다. JavaScript의 실험적 기능을 사용하여 여러 번 웹 전체에서 이러한 기능을 찾을 수 있습니다.

그리고 CodePen의 이 스니펫은 그러한 아이디어를 수집하는 데 환상적입니다. 다양한 확대/축소 속도, 옆으로 패닝 및 기타 여러 관련 기능이 있는 매우 미친 애니메이션이 있습니다.

파티클은 동적으로 생성되며 페이지의 아무 곳이나 클릭하여 확대할 수 있습니다. 이것은 우리가 살고 있는 공간과 매우 흡사한 끝없는 공허함처럼 느껴집니다. 그러나 이것은 순수한 JS 코드로 생성되었습니다.

8. 햄 큐브

좀 더 회전하는 지오메트리를 보려면 이 Three.js 큐브를 확인하세요. 그들은 ~100줄의 JavaScript와 함께 Haml 템플릿 언어에서 실행됩니다.

아마도 이 디자인의 가장 인상적인 부분은 음영 효과일 것입니다. 이것은 자주 볼 수 없지만 브라우저에서 사실적으로 보이는 3D 효과를 만드는 가장 좋은 방법 중 하나입니다.

고맙게도 올바른 스니펫을 사용하여 Three.js를 통해 이 모든 것을 처리할 수 있습니다. 그리고 이것은 그 목적을 위한 훌륭한 템플릿으로 작동할 수 있습니다.

9. 테서랙트

Mike Fey는 3D 공간에서 렌더링된 이 엄청나게 복잡한 테서랙트를 개발했습니다. 실제로 3D 공간으로 조직된 펼쳐진 큐브처럼 보입니다. 일종의 큐브 안의 큐브와 같습니다.

그러나 이 데모를 실행하려면 많은 라이브러리가 필요합니다. Mike는 jQuery, jQuery UI, ThreeJS, TweenJS 및 CubeJS 스크립트가 포함된 5개의 다른 JS 스크립트를 가지고 있습니다. 후자의 3개는 그의 개인 사이트에서 호스팅되며 무료로 액세스할 수 있어야 합니다.

이 프로젝트가 현실 세계에서 가치가 있다고 말할 수는 없습니다. 그러나 3D 공간 기하학에 뛰어들고 싶다면 학습 자료의 지옥입니다.

10. 3D 파편

개발자 Tobias Duhr는 ThreeJS에서 가능한 것의 샘플로 이러한 3D 샤드를 구축했습니다. 모양이 다르고 음영도 사라진다는 점을 제외하고는 앞에서 언급한 회전하는 큐브처럼 작동합니다.

어디서부터 시작해야 할지 모르겠다면 이 글이 ThreeJS를 배우기 위한 더 쉬운 입문서라고 생각합니다. 물론 이것은 튜토리얼이 아니므로 다른 리소스처럼 가르칠 수 없습니다.

그러나 이 코드를 공부하는 것만으로도 자신의 작업에 대한 새로운 아이디어를 얻을 수 있습니다.

11. 3D 피타고라스 나무

이 3D 피타고라스 나무는 단순히 놀랍습니다. 개발자 Josep Llodra는 Three.js 라이브러리와 함께 단 150줄의 JavaScript로 이 프로젝트를 만들었습니다.

이것은 실제로 제가 앞서 언급한 이 프로젝트를 기반으로 합니다. 기본적으로 이러한 큐브를 정의된 단일 모양으로 구조화한 다음 크기와 위치에 따라 구성합니다.

Three.js로 무엇을 할 수 있는지 잘 모르겠다면 이 갤러리가 약간의 영감을 주기를 바랍니다. 그러나 주위를 둘러보고 싶다면 언제든지 CodePen에서 더 많은 것을 찾을 수 있습니다.