Nebula Cloud Particles Effect Three.js Tutorial

웹 사이트를위한 멋진 배경을 만들 아이디어를 찾고 있습니다 이 튜토리얼은 애니메이션 성운을 만드는 방법을 보여줍니다

자바 스크립트와 threejs를 사용하는 배경을 확인해 보겠습니다 기본 장면 설정은 먼저 threejs 라이브러리를 가져온 다음 장면과 카메라를 설정합니다 60도 시야각으로 투시 카메라를 사용하고 뷰 프로스트가 1000 인 현재 뷰포트 크기로 카메라를 배치 한 다음 다음 회전을 설정하고 주변 광을 부드러운 백색광으로 설정 한 다음 WebGL 렌더러 설정 장면에 녹색 안개를 추가하여 오로라 효과를 만들고 페이지에 캔버스 요소로 장면을 추가하고 마지막으로 렌더링을 설정 렌더러에서 render 메소드를 호출 한 후 requestanimationframe 만 호출하면됩니다

이제 장면이 성운을 만들도록 설정되었습니다 먼저 구름을 만들어야합니다 파티클은 이전 튜토리얼의 클라우드 텍스처를 재사용 할 것입니다 로드 texture를 three

js로 텍스쳐 로더를 사용한 다음 계속해야합니다 콜백 함수 다음에 처리하고 클라우드를 먼저 생성하기 위해 일반 지오메트리로 머티리얼을 만들고 클라우드 텍스처를 머티리얼에 매핑 많은 클라우드가 필요하므로 transparent 속성을 true로 설정하십시오 파티클은 루프를 50 번 생성하고 위의 지오메트리와 재질은 각 구름마다 위치를 무작위로 지정합니다 그리고 회전 또한 불투명도를 55 %로 줄이고 마지막으로 씬에 추가했습니다 다음으로 구름을 애니메이션 해 보도록하겠습니다 먼저 배열 객체를 만든 다음 생성 후 각 클라우드에 대한 참조 렌더링 루프 내에서 다음에 각 클라우드의 회전을 업데이트합니다

먼저 조명 작업을 시작합니다 옅은 주황색 방향 조명을 추가합니다 다른 색의 포인트 라이트를 추가하겠습니다 구름 주위에 주황색 빨강과 파란 빛을 두십시오 성운 구조가 완성되면 다음으로 포스트 프로세싱 작업을합니다 이전 튜토리얼에서 블룸 또는 HDR 게시물을 만드는 방법을 보여주었습니다 처리 효과이 자습서에서 해당 코드를 재사용 할 것입니다

세 가지 테스트를 위해 사후 처리 플러그인을 가져온 다음 전역 변수를 작성하십시오 효과 작곡가를 위해 마지막 튜토리얼에서 코드를 복사하십시오 일반 렌더러 대신 포스트 프로세싱 컴포저에서 렌더링 이제 거의 배경이 약간 비어있어서 여기에 별을 추가하겠습니다 배경 질감으로 사용할 스톡 이미지입니다 텍스처 로더를 다시 사용하여 이미지를 만든 다음 텍스처 후 처리 효과를 만듭니다 텍스처에서 컬러 닷지 블렌드 기능을 사용하여로드했습니다

불투명도를 20 %로 설정 한 다음 효과 패스에 효과를 추가하십시오 코드를 복사하고 만든 후 이전 튜토리얼의 로그인 양식 여기에 작은 CSS 배경색 변경이 있습니다 이 예제를 반응 형으로 만들려면이 튜토리얼을 업데이트해야합니다 사용자가 브라우저 창 크기를 조정할 때 가로 세로 비율이 있으므로 핸들러를 만들어 보겠습니다 카메라를 재설정하고 설정을 렌더링하는 기능 그런 다음 크기 조정 이벤트로 바인딩하십시오 이 튜토리얼의 모든 것이 당신이 더 많은 것을보고 싶다면 즐기길 바랍니다

개발 팁과 자습서가이 채널을 구독하여 다음에 또 만나요