Three.js Postprocessing Effect Tutorial

이전 튜토리얼에서 3D 모델을 웹 사이트로 가져 오는 방법을 보여주었습니다 이 자습서에서는 three

js를 사용하여 포스트 프로세싱을 추가하는 방법을 보여줍니다 단 몇 분만에 3D 장면에 효과를 줄 수 있습니다 이전 튜토리얼에서 3 개의 파일을 페이지로 가져와야합니다 다음으로 threejs 핵심 파일은 orbitcontrol

js입니다 카메라의 마우스 컨트롤과 마지막은 3D를로드하는 gltf 로더입니다 장면에 모델 이미 다룬 장면 설정부터 시작하겠습니다 이전 튜토리얼에서 이러한 단계에 대한 세부 정보를 제공하므로 여기서 조금 더 빠르게 진행하겠습니다 먼저 장면을 만들고 배경색을 흰색으로 설정 원근 카메라를 만들고 위치를 설정 그런 다음 WebGL 렌더러를 설정하고 캔버스에 페이지에 추가 마지막으로 렌더링 루프를 설정 기본 설정이 완료되면 여기에 빈 페이지가 표시 될 수 있지만 콘솔을 보면 three

js의 메시지가 표시됩니다 다음은 gltf 로더를 사용하여 모델을로드하기 시작합니다 sketchfab에서 찾은 앤티크 샷건 모델을 사용할 것입니다 다음 수동 마우스 제어를위한 궤도 제어 설정 광원이 없기 때문에 검은 색 물체로 볼 수 있습니다 조명과 모델 주위에 그를 배치 이제 씬이 준비되었습니다

다음으로 포스트 프로세싱에 대해 이야기하겠습니다 후 처리 렌더링 개념은 현재 WebGL 렌더러를 사용하여 각 프레임을 렌더링하고 캔버스에 표시하지만 추가하려는 경우 장면에 대한 피사계 심도 효과 블러 양을 계산하고 다시 계산해야합니다 장면을 다시 렌더링하고 이것이 포스트 프로세싱이라고하는 이유입니다 이 렌더링은 메인 장면 렌더링 후 처리 이후에 발생하기 때문에 각 렌더링이라고하는 여러 효과를 추가하면 렌더링이 여러 번 발생할 수 있습니다 WebGL 렌더러를 사용하는 대신 이제 Pass Composer를 사용해야합니다

대신 렌더러를 기반으로 작곡가를 만들 수 있습니다 작곡가에게 패스를 추가하면 첫 번째 패스와 필수 패스가 렌더링 패스입니다 다른 패스의 메인 장면을 렌더링하는 것입니다 그러면 효과 패스를 생성합니다 블룸 또는 HDR 효과를 추가해 봅시다 패스를 만든 후에는 render to screen을 true로 설정하여 활성화해야합니다 컴포저에 추가하면 대신 컴포저에서 장면을 렌더링합니다 렌더러는 three

js 사후 처리를 가져와야한다는 사실을 거의 잊었습니다 이 기능을 사용하기위한 플러그인 비디오에서 코드의 모든 파일에 대한 링크를 찾을 수 있습니다 아래 설명 상자 이 지식을 통해 다음과 같은 놀라운 후 처리 효과를 추가 할 수 있습니다 비디오에서이 자습서에 대한 모든 링크와 볼륨 제거 및 앤티 앨리어싱 아래 설명 상자와이 자습서의 모든 내용은 원하는 경우 도움이되기를 바랍니다 더 많은 웹 디자인 및 개발 튜토리얼을 보려면이 채널을 구독하십시오 시청 해 주셔서 감사합니다 다음에 또 만나요