3D Space Warp JavaScript Effect – Three.js Tutorial

이전 튜토리얼에서는 다음을 사용하여 성운 입자 효과를 만드는 방법을 보여줍니다 Three

js이 튜토리얼은 여전히 ​​공간 관련입니다 오늘 우리는 공간 왜곡 배경 효과를 만드는 방법을 보여줄 것입니다 단 몇 분 만에 javascript와 threejs를 사용하여 확인해 보겠습니다 이 페이지의 기본 CSS는 여백을 0으로 재설정하고 overflow : 스크롤바를 제거하기 위해 숨겨졌습니다 이제 threejs 라이브러리를 우리의 페이지는 장면 카메라를 만드는 데 필요한 기본 설정으로 시작하고 렌더러는 먼저 새로운 장면 오브젝트를 만듭니다 그런 다음 60도 시야각으로 원근 카메라를 설정하십시오

천의 시야 절두체 나는 카메라를 배치하고 90도 회전 하늘로 올라가서 다시 돌아와 떨어지는 별 입자를 만듭니다 다음으로 WebGLrenderer를 설정하겠습니다 현재 뷰포트와 일치하도록 크기를 설정 한 다음 캔버스 요소로서의 페이지는 최종적으로 함수를 생성하여 렌더링 루프를 만듭니다 장면을 렌더링 한 다음 requestanimationframe을 사용하여 재귀 적으로 기본 설정이 완료되었습니다 여전히 빈 페이지이지만 열면 콘솔에는 모든 것을 나타내는 세 가지 J 메시지가 표시됩니다 우리가 가고 있기 때문에 우리는 스타 입자를 만들 것입니다 각각의 입자에 대해 구 모양을 만드는 것은 비싸고 웹 사이트를 느리게 만드는 대신 단일 3D를 만들 것입니다 많은 정점이있는 오브젝트 다음 해당 오브젝트의 각 정점에 대해 three

js에서 원 텍스처로 매핑합니다 이것을 점 객체라고 부릅니다 파티클을 다루는데 매우 유용합니다 이제 생성부터 시작하겠습니다 기하학 그런 다음이 튜토리얼 6000에 각 정점 또는 별을 추가하는 루프를 만듭니다 충분하면 위치를 무작위로 지정하고 추가합니다

정점 배열에 다음 텍스처 매핑을 시작하면 투명한 흰색 원을 사용할 수 있습니다 이 배경을 텍스처 로더를 사용하여 이미지를로드하십시오 포인트 자료를 만들 색상을 흰색으로 설정하고 크기를 조정하고로드 된 이미지로 매핑하십시오 지오메트리와 재질은 이미 포인트 주제를 만들어 장면에 추가합니다 좋아 보입니다 먼저 애니메이션을 시작하겠습니다

각각에 대해 초기 속도를 설정합니다 작은 가속도로 별표 0 각 애니메이션 프레임에서 각 정점을 살펴보고 속도를 업데이트합니다 그런 다음 별의 경우 속도 값으로 y 축을 따라 별을 이동하십시오 화면 뒤에서 떨어지면 시작 위치와 속도를 재설정합니다 다시 우리는 새로운 정점 위치를 업데이트하도록 조정할 것입니다 verticesNeedUpdate를 true로 설정 마지막으로 모든 별에 작은 회전을 추가하여 작은 영화 효과를 만들 것입니다 코드와 CSS를 추가하면 효과가 준비됩니다 이 장면에 배경이있는 간단한 웹 사이트가 있습니다

당신이 이것을 좋아한다면 당신이 즐길 희망 바랍니다 계속 지켜봐 구독 더 많은 개발자 팁과 튜토리얼을 보려면 다음에 만나서 감사합니다

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

Nebula Cloud Particles Effect Three.js Tutorial

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

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

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

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

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

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

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

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

Split.js Tutorial – Create Split Screen Effect on your Website

안녕하세요이 튜토리얼에서 빨간색 스테이플러 채널에 오신 것을 환영합니다

splitjs에 관해서는 자바 스크립트 라이브러리를 웹 페이지 또는 다른 요소를 사용하고 크기 조정 가능한 파티션을 몇 개만 만들면됩니다 분 준비해 봅시다 splitjs의 두 가지 버전이 있습니다 float 및 flex 레이아웃을 지원하는 원본 버전과 그리드 용 새 버전 이 자습서의 레이아웃은 먼저 설치할 수있는 원래의 것을 사용합니다

NPM 또는 CDN에서 방금 포함 된 내용 이 튜토리얼은 단순화를 위해 CDN을 사용할 것이므로 여기 예제 페이지가 있습니다 페이지에 3 개의 상자로 추가하고 플렉스 레이아웃을 사용하여 가운데에 배치하십시오 현재 가지고있는 CSS는 배경색 테두리가있는 기본 스타일 일뿐입니다 패딩 이제 우리는 split을 호출하여 라이브러리를 사용할 수 있고 이 경우 나뉘어지기를 원할 요소 선택기 각 상자의 이름 검사관을 사용하면 상자가 분리된다는 것을 알 수 있습니다 도서관에서 이미 보이지 않는 배수관을 추가했음을 알았습니다

도랑 선을 표시하고 크기를 조정하여 크기를 조정할 수있는 파티션을 만듭니다 우리가 단지 물통 높이를 100 %로 설정하고 색상을 red는 splitjs가 수동으로 수행하는 이유입니다 레이아웃을 방해하려는 경우에만 크기를 계산하고 삽입합니다 보이지 않는 배수구와 나머지는 여러분에게 달려 있습니다

이제 우리는 크기를 조정해야합니다 배수구 그러나 그것은 우리가 커서를 양면 화살표로 바꿔야하는 나쁜 UX 다 사용자가이 크기를 조정할 수 있음을 알리기 위해 마우스를 올려 놓으면 좋아 보인다 splitjs에서 자주 사용하는 옵션 첫 번째는 배수구 크기를 아주 간단하게 바꿀 수 있습니다

도랑 선 크기 조절 다음은 각 파티션의 시작 크기입니다 이처럼 백분율 값의 배열을 전달하십시오 마지막 하나는 minSize입니다 이것은 각각의 최소 크기로 제한 할 수있는 곳입니다 도랑 선이 split

js도 수직으로 작동하기 전에 분할 모드에 옵션을 수직으로 추가 한 다음 페이지 레이아웃을 조정하십시오 따라서이 튜토리얼에서는 flex 방향을 column으로 변경합니다 모드에서 거터 높이 설정을 제거하고 커서 방향을로 변경하십시오 수직 양면 화살표 splitjs를 사용하면 웹 사이트에 놀라운 효과를 쉽게 만들 수 있습니다

여기 splitjs와 CSS 수정 배경을 사용하는 예가 있습니다 아래 비디오 설명 상자에 소스 코드가 있으므로이 튜토리얼의 모든 내용을 참조하십시오 이 비디오를 좋아해요이 비디오를 좋아한다면, 좋아하거나 구독하는 것을 잊지 마세요

채널은 다음 업데이트를 위해 계속 조정되고 다음에 시청할 시간이 있습니다

Realistic Rain Effect Three.js Tutorial

이전 비디오에서 우리는 Thanos 포털 효과를 만드는 방법에 대한 자습서를 만들었습니다 이번에는 동일한 기술을 사용하여이를 켜는 방법을 보여 드리겠습니다

현실적인 비가 오는 장면에 불과 몇 분 안에 들어가서 확인해 보겠습니다 먼저 threejs의 최신 버전을 다운로드하고 다음 페이지가 이전 장면을 만듭니다 그 다음 카메라를 만듭니다 60도 필드와 함께 원근 카메라를 사용합니다

현재 뷰포트 종횡비와 1000 단위 뷰잉 프러스 텀을 사용하여 뷰를 보겠습니다 하늘의 카메라를 바라 보도록 카메라의 회전 각도를 설정합니다 여기에 두 가지 유형의 빛을 추가하십시오 첫 번째 것은 주변 광선입니다 모든 방향에서 장면의 모든 물체를 비춘다

두 번째는 방향성 라이트입니다 이것은 하늘의 달빛을 나타냅니다 Nexo는 현재 뷰포트 크기를 사용하여 WebGL 렌더러를 설정했습니다 캔버스 요소로 페이지에 추가하면 기본 설정이 완료됩니다 하지만 이번에는 볼 것이 없다

우리는 약간의 구름을 추가하는 것으로 시작할 것이다 threejs에서 3d 객체를 생성하기 위해서는 두 가지가 필요합니다 객체의 모양을 정의하고 또 다른 것은 객체를 정의하는 재료입니다 표면 및 구름에 대한 질감 나는이 연기 이미지를 질감으로 사용하자

트리거 할 콜백 함수에서 텍스처 로더를 설정하십시오 텍스처가로드되면 각 클라우드에 대한 지오메트리가 500으로 생성됩니다 비행기 정사각형 단위 그런 다음 소재를 만들고 연기 질감으로 맵핑하여 투명도를 설정하십시오 이제 사실대로 각 구름을 장면에 무작위로 추가하는 루프를 만들 것입니다 먼저 기하학과 재료로부터 구름 객체를 만듭니다

임의로 위치를 설정하십시오 내가 카메라를 직면하는 구름 회전 각도를 설정합니다 또한 약간의 추가 z 축 주위를 무작위로 선택하고 60 % 불투명도를 설정하고 장면에 추가합니다 다음으로 장면을 애니메이션으로 만들어 봅시다 각 구름에 대한 참조를 유지할 것입니다 다음 배열을 회전하려면 배열을 사용합니다 애니메이션 기능에서 하나씩 차례로 장면을 렌더링하고 애니메이션 루프를 시작합니다

requestanimationframe 다음 번에 번개 플래시를 추가하여 파란색으로 포인트 라이트를 설정해 보겠습니다 나는 그것을 구름 뒤에두고 애니메이션에 장면을 추가 할 것이다 기능 나는 임의의 플래시 위치와 빛의 강도에 논리를 추가 할 것이다 if 조건에서이 숫자를 변경하여 주파수를 조정할 수 있습니다 번개 강도 구름이 준비되면 옆에 비가 올 것입니다

조금 다릅니다 구름을 추가하여 각 빗방울에 대해 분리 된 객체를 생성하지 않을 것입니다 그것은 매우 비효율적 일 것이고 우리 대신에 프레임 속도가 떨어질 것입니다 많은 꼭지점과 각 꼭지점을 가진이 하나의 객체를 만듭니다 하나의 빗방울을 나타내므로 각 꼭지점을 만들기 위해 루프를 만들 것입니다

vector three object 우리는 mathrandom을 사용하여 위치를 랜덤하게 만들 것입니다 그런 다음 verticespush를 사용하여 정점을 지오메트리에 추가 한 다음 비 재료를 사용하여 점 소재 클래스를 사용하여 크기와 색상을 흰색으로 설정 마침내 우리는 비가 오는 물체를 만들어서 장면에 추가 할 것입니다 이제 각 빗방울에 속도 속성을 추가하여 비를 움직입니다

애니메이션 기능에서 각 드롭을 이동하고 중력을 시뮬 레이팅하는 속도가 바깥에 있으면 위치를 재설정합니다 화면 마침내 나는 안개를 마무리로 추가 할 것이다 또한 비오는 물체에 작은 회전을 추가하여 영화 효과를 만들고 그것이이 튜토리얼을 사랑한다면이 비디오를 공유하여 도움을받을 수 있습니다 우리 채널을 구독하고 더 많은 감사를 위해 계속 지켜봐 달라 다음에 너를보고보고 뵈러 간다

3D Photo Effect from 1 Image JavaScript Tutorial

안녕하세요 빨간색 스테이플러에 오신 것을 환영합니다

이 튜토리얼에서는 채널을 보여 드리겠습니다 javascript와 pixijs를 사용하여 한 장의 사진에서 3D 효과를 만드는 법 WebGL 라이브러리에서 확인해 봅시다 그래서 사진을 3 차원으로 변환하기 위해서는 다음과 같이 깊이 맵을 사용해야합니다 이름은지도가 3D의 각 픽셀의 깊이를 보여주는 이미지 파일이라고 이 예에서 볼 수 있듯이 세계는 화면에 가깝습니다

따라서 밝은 색은 차고의 나머지 부분은 그들의 색에 따라 더 어둡습니다 거리를 계산 한 다음 깊이 맵을 전달하여 최종 결과를 얻습니다 이건 내가 만든 이전 비디오와 같은 기술이야 물 파급 효과는 지금 우리의 채널에 대한 튜토리얼을 확인하십시오 이 튜토리얼에서는 pixi

js를 사용하여 2 차원 WebGL 라이브러리를 사용할 것입니다 원한다면 기본 WebGL을 사용하십시오 그러나 WebGL을 사용하면 훨씬 빠르고 쉽게 라이브러리는 최신 버전을 다운로드하고 페이지에 포함 시키십시오 pixijs 응용 프로그램을 만듭니다

이것은 pixijs를 사용하는 가장 빠른 방법입니다 현재 뷰포트를 해상도로 전달한 다음 추가 할 것입니다 HTML 페이지에서 브라우저가 캔버스 요소로 볼 것이며 여기에 장면에 추가 할 이미지를 이미지 URL에서 스프라이트를 만들어 보겠습니다 현재 뷰포트로 해상도를 설정하십시오

다음 스테이지를 추가하고 다음 단계는 깊이 맵을 생성하는 것입니다 일부는 변위 맵이나 높이 맵을 호출 할 것입니다 저는 Photoshop을 사용하여 먼저 원본 이미지를 연 다음 새 레이어를 만들어 다음과 같이 채 웁니다 검은 색으로 표시 한 다음 불투명도를 줄이면 원본 이미지가 간신히 보입니다 아래 가이드를 누른 다음 흰색 브러시를 선택하십시오

및 20 % 불투명도로 화면에 가장 가까운 이미지 영역을 그립니다 더 가까워 질수록 더 많이 강조 할 필요가 없습니다 100 % 정확하므로 경계와 약간의 세부 사항에 대해 걱정할 필요가 없습니다 결과를보기 위해 레이어의 불투명도를 조정합니다 초과 부분을 제거하고 완성 된 깊이 맵이지만 완벽한 작업이지만 다음 단계는 깊이 맵에서 스프라이트를 만드는 것입니다 무대에 추가 우리의 깊이 맵에서 변위 필터를 만들고 무대에 적용하십시오

이미지를 이동해야하기 때문에 3D 효과가 아직 표시되지 않습니다 마우스 이동은 마우스 이동 수신기를 추가하고 스케일을 적용하여 쉽게 수행 할 수 있습니다 우리는 마우스 위치에 따라 변위 필터를 빼야합니다 화면 크기의 절반으로 마우스 x 및 y 위치로 마우스가 움직일 때 화면 오른쪽에 결과가 부정적으로 나타나고 카메라가 오른쪽으로 이동하면 왼쪽으로 이동합니다 결과를 몇 가지 고정 숫자로 나눠서 감도를 줄이십시오

환경 설정에 맞게 조정하면 여기에 최종 결과가 표시됩니다 이 비디오는 여러분이 이런 종류의 튜토리얼을 좋아한다면 즐겁기를 바랍니다 잊지 마세요 좋아하는 사용자는이 채널을 처음 보시고 더 감사드립니다 다음에 너를보고보고 뵈러 간다

Realistic Water Ripple Effect JavaScript Tutorial

안녕하세요 스테이플러 채널에 오신 것을 환영합니다

이 튜토리얼에서 우리는 당신에게 보여줄 것입니다 javascript와 pixijs를 사용하여 처음부터 물 파급 효과를 만드는 법 몇 분만에 준비된 라이브러리를 확인해 봅시다 pixie chess는 2D WebGL JavaScript 라이브러리로, 몇 줄의 코드만으로 놀라운 효과를 쉽게 얻을 수 있습니다 pixi

js의 최신 버전을 다운로드하고 페이지에 포함하십시오 이리 이 튜토리얼에서 필요한 예제 페이지는 margin : 0이고 overflow : hidden 이제 먼저 pixijs를 초기화하는 것으로 시작합시다 응용 프로그램 개체를 만드는 데 필요한 구성 요소가 있습니다 렌더러 루트 컨테이너와 같은 장면을 렌더링하고 시간을 추적하는 것은 Pixi

js를 사용하여 수동으로 만들지 않는 한 가장 빠른 방법은 pixijs를 사용하는 것입니다 하나는 현재 뷰포트 너비와 높이를 제공 할 크기를 전달합니다 그런 다음 appview를 사용하여 장면을 HTML 페이지에 canvas 요소로 추가하고 다음으로 장면에 이미지를 추가하는 것으로 시작합니다

먼저 스프라이트를 만듭니다 JPG 이미지에서 너비와 높이를 설정합니다 리플 효과를 만들기 위해 스테이지에 추가하십시오 이미지 픽셀을 원본 위치에서 멀리 이동시켜 왜곡 pixi

js를 사용하면 위치 변경 맵을 사용하여이 작업을 수행 할 수 있습니다 원래 흑백 패턴의 무작위 변형을 만들어서 이 자습서의 원본 이미지 매핑 Photoshop을 사용하여 이미지를 만듭니다 먼저 새 정사각형 이미지를 만든 다음 렌더링 필터를 사용하고 클라우드를 선택하고 이제 그게 전부입니다이 이미지로 스프라이트를 만들 것입니다 랩 모드를 설정하는 데 필요한 스프라이트에서 변위 필터를 만듭니다

이것을 반복하려면 변위가 전체 이미지를 덮고 있는지 확인해야합니다 무대에 추가하고 미래를 적용하십시오 이 시점에서 모든 것이 준비되었지만 여전히 많은 것을 볼 수는 없습니다 위치 변경 맵을 이동하기 위해 애니메이션을 만드는 데 필요한 차이점 잔물결 효과를 볼 수 있도록 애니메이션 기능을 만들고 우리가 호출 할 함수의 끝에있는 위치 변경 맵 위치 requestAnimationFrame 애니메이션 루프를 시작합니다 괜찮은 것 같지만 당신은 조금 더 가까이서 보입니다

가장자리 주위에 왜곡이 보일 것입니다 그 이상으로 픽셀이 없기 때문에 정상적으로 확대됩니다 조금만 변환 스케일을 렌더러에 적용하면됩니다 또한 리플이 너무 조밀하기 때문에 규모를 조정할 것입니다 변위 맵 당신은 당신이 창조 한 다른 변위 맵으로 변화와 실험을 시도 할 수 있습니다

다양 한 잔물결 효과 그리고 그게 다야! 이 코드를 20 줄 넘는 약간의 코드 튜토리얼은 여러분이 즐기기를 희망하며, 더 많은 것을보고 싶다면 잊지 마세요 지켜봐 주셔서 감사 드리며 앞으로도 계속 지켜봐주십시오 시간이 지나면

Thanos Portal Effect JavaScript Tutorial

이전 비디오에서 우리는 Thanos 스냅 효과에 대한 자습서를 작성하여 받았습니다 상당히 긍정적 인 반응을 보입니다

이 비디오에서 우리는 Thanos a와 함께있을 것입니다 좀 더 자세히 살펴보고 처음부터 자바 스크립트로 포털을 만든 방법을 살펴보십시오 이 튜토리얼에서 threejs 라이브러리를 사용하여 먼저 장면을 렌더링하는 데 도움이됩니다 최신 버전을 다운로드하고 여기 당신의 페이지에 우리가 이것을 만들기 위해 CSS가 전혀 필요없는 예제 페이지가 있습니다

여백 0 및 오버플로를 제외하고 발생 : 스크롤바를 숨기려면 숨김 threejs로 렌더링 장면을 설정해 보겠습니다 장면 만들기는 여러분의 3D 세계를위한 컨테이너와 같습니다 빛이없는 빛으로 씬에서 아무 것도 볼 수 없게됩니다 주변 광선에 방향성 광원을 사용하여 밝은 색을 설정합니다

50 %의 강도를 가진 흰색을 선택하면 빛의 방향을 정면에서부터 우리가 촬영할 카메라가 필요한 다음 빛을 가지고 지금 다시 현장에 추가 귀하의 장면은 가장 일반적인 카메라 유형 인 원근 카메라를 사용합니다 3D 장면 렌더링 80도 시야와 현재의 시야를 사용하려고합니다 가로 세로 비율로 뷰포트 마지막 두 숫자는 화면의 절두체를 정의합니다 카메라를 설치 한 다음 카메라 1000 개를 앞면에 놓고 다음 장면으로 우리가 사용할 렌더링 엔진을 설정합니다

이 튜토리얼의 WebGL 환경 색상을 검은 색으로 설정하고 뷰포트에 크기를 렌더링하여 페이지에 추가했습니다 이제 장면이 준비되었지만 지금 렌더링하면 장면이 보이지 않습니다 우리가 장면에 어떤 객체도 추가하지 않았기 때문에 이것은 무엇이든 할 수 있습니다 별도의 함수 호출 프로토콜 설정을 작성한 다음 텍스처 로더 연기 질감을로드 할 개체입니다 모든 투명을 사용할 수 있습니다

여기 PNG 형식의 연기 이미지는 내가이 자습서에 대해 가지고있는 것입니다 텍스처가로드 메소드를 사용하고로드가 완료되면 트리거됩니다 콜백 함수 3d 객체를 생성하려면 두 가지가 필요합니다 첫 번째는 형상입니다

모양을 정의하고 두 번째는 같은 표면 외관을 정의하는 재료입니다 투명도 반사성과 텍스처 비행기 기하학을 만들고 우리의 감촉을 돋보이게하는 재료 우리의 기하와 물체로부터 3d 객체를 생성 한 다음 위치를 지정하고 장면을 렌더링하려고하면 장면에 추가하십시오 Thanos 포털을 보면 입자가 이제 연기되어서 원뿔 모양의 나선형이므로 많은 연기를 생성하는 루프를 만들 것입니다 입자와 나선형 선을 따라 여기에 놓는다 내가 인터넷 검색을하고 각 입자 위치를 설정하는 데 사용합니다

무작위 회전으로 다양성 만들기 좋아 보이기 시작한 다음 애니메이션으로 해보 죠 애니메이션을 만들려면 시간을 추적하려면 시계 객체가 필요하고 애니메이션을 만들 것입니다 기능 이 함수는 장면을 애니메이션으로 만들기 위해 재귀 적으로 호출 될 것입니다 각 실행은 하나의 프레임을 나타낼 것입니다

먼저 우리는 getDelta를 사용하여 시계 객체의 프레임을 가져옵니다 우리는 그것을 사용하여 애니메이션 중에 장면의 오브젝트가 움직 인 다음에 배열을 만들고 그것에 모든 입자를 추가하십시오 애니메이션 기능에서 우리는 그 배열을 통해 회전을 추가 할 것입니다 델타를 사용하면 장면을 렌더링하고 requestAnimationFrame을 호출 할 것입니다 거의 재귀 적으로 시작하자

문 이번에는 방향성 대신 점 광원을 사용하고 소용돌이의 중심 그런 다음 mathrandom을 사용하여 임의의 깜박임을 추가하십시오 마지막으로 동일한 코드를 사용하여 배경 연기를 추가 할 예정이지만 이번에 나선형 방정식을 사용하십시오 불투명도를 40 %로 설정했습니다

그리고 이것이 당신이 이것을 사랑한다면 최종 결과입니다 튜토리얼을 좋아하거나 더 많은 것을 위해 우리와 함께 지켜봐야한다는 것을 잊지 마라 다음 번에 보러와 줘서 고마워 안녕

Realistic CSS Neon Text Effect Tutorial

안녕하세요 빨간색 스테이플러에 오신 것을 환영합니다

이 튜토리얼에서 채널을 보여 드리겠습니다 순수한 CSS로 사실적인 네온 텍스트 효과를 만드는 법 준비 됐어 그래서 검은 배경의 예제 페이지가 있습니다 이미 래퍼 div가 있습니다 Flex 레이아웃을 사용하여 화면의 모든 것을 가운데에 놓고 먼저 다른 것을 만듭니다

네온 텍스트를위한 래퍼 다음으로 다른 자식 div를 생성한다 나는 라인을 사용할 것이다 텍스트를 두 줄로 분리하는 분리 태그는 HTML 구조를위한 것입니다 먼저 CSS를 작성해 보겠습니다 글꼴을 만드는 데 적합한 글꼴을 찾습니다

나를위한 네온 효과 나는 단지 무료 글꼴 웹 사이트에서 단어 네온을 검색하고 하나를 선택한다 일단 글꼴 파일을 웹 디렉토리에 넣고 글꼴을 사용하여로드하십시오 그것과 다음 글꼴 크기와 색상을 설정 이제 우리는 텍스트 그림자를 사용하여 빛나는 효과를 창출 할 것입니다 이전 비디오와 동일한 기술로 시간을 절약하기 위해 3D 텍스트 효과 만들기 여기에 기본적으로 입력하는 대신 여기에 복사하여 붙여 넣습니다 여러 가지 흐림 반경과 색상 강도를 지닌 여러 레이어의 그림자 예를 들어 텍스트에 가장 가까운 빛이 가장 밝아야하므로 매우 창백한 빨강 및 소량의 오프셋 및 흐림 반경 및 멀리있는 사람들을위한 텍스트에서 더 흐리게 반경과 오프셋으로 어두운 색으로 설정합니다

프로젝트 디자인에 맞게 이러한 값을 실험하고 조정할 수 있습니다 그리고 더 현실적인 결과를 위해 여기에 어두운 벽돌을 추가 할 것입니다 주 래퍼의 배경 이미지로 벽 이제 여기에 선택 사항입니다 우리가 쉽게 사용할 수있는 테두리를 추가 할 것입니다 같은 기술이지만 테두리가 텍스트가 아니기 때문에 상자 그림자를 사용해야합니다

텍스트 그림자 대신 다시 복사하여 붙여서 시간을 절약 할 것입니다 사이드 패딩을 추가한다 당신은 inset 속성을 가진 그림자 세트를 가지고있는 것을 볼 수 있습니다 상자 그림자 반경이 양쪽에 표시되므로 더 나은 비교를 보도록하겠습니다 이해하고 마지막으로 병 반경을 추가하여 완료하십시오

이 튜토리얼은 당신이이 비디오를 좋아한다면 그것을 좋아할 것입니다 이 채널을 처음 보시고 더 많은 것을보고 싶다면 구독하십시오 보고 다음에 보자 안녕히 가세요

Thanos Snap Effect JavaScript Tutorial

타 노스 스냅 효과는 Google의 최고의 부활절 달걀 중 하나입니다 좋아하지만 Google이 코드를 난독 화했기 때문에 기술을 사용하여 지난 몇 일 동안 나는 약간의 시간을 창조하려고 노력했다

내 자신에 하나 그리고 결과는이 튜토리얼에서 보았던 것입니다 너를 보여주고 내가 어떻게했는지 설명 해보자 먼저 확인해 보자 개념을 사용하면 Google 애니메이션을 검사하면 각 요소가 원본 요소의 일부를 포함하는 여러 캔버스 만들기 그런 다음이 개념을 사용하여 사라질 때까지 회전하고 변형합니다 이미지와 캔버스 객체를 변환하는 방법을 찾아야합니다

그 이미지의 픽셀을 여러 캔버스에 무작위로 배포하고 마침내 각 요소에 애니메이션을 추가합니다 단순히 요소를 이미지로 변환합니다 조각으로 자르고 애니메이션을 추가하자 처음부터 시작하자 다행히도 우리는 매우 유용한 라이브러리 html2canvas를 호출 할 수 있습니다

어떤 HTML 요소 이건간에 코드가 나올 때부터 캔버스 객체를 반환합니다 이 튜토리얼은 꽤 길어서 타이핑하지는 않겠지 만 단계로 설명한다 라이브러리를 포함 시키면 대신 div 요소를 전달합니다 캔버스 객체를 얻으려면 다음에서 모든 픽셀 데이터를 포함하는 배열을 가져옵니다 이제 다음 단계를 기억한다면 조각으로자를 것입니다

우리는 픽셀 배열을 가지고 있습니다 우리는 픽셀 데이터를 다중 캔버스가 있지만 애니메이션이 희미 해지기를 바라기 때문에 조금 까다 롭습니다 상단에서 대다수의 픽셀이 필요합니다 햄버거가 첫 번째 그룹의 캔버스와 대다수의 하위 픽셀에 있어야합니다 우리가 각 캔버스 애니메이션을 시작할 때 마지막 캔버스 그룹에서이 방법으로 순차적으로 문제가 위에서 아래로 사라지는 것처럼 보일 것입니다

이건 규칙적인 무작위가 아니에요 수학을 사용하면됩니다 기본적으로 가중치 분포 함수를 생성하는 중입니다 탑 픽셀이 제 1 캔버스 그룹 및 하단에있을 확률 마지막 픽셀 다음은 픽셀의 정규 분포와 가중 분포의 비교입니다 이를 달성하기 위해 나는 chance

js를위한 JavaScript 라이브러리도 사용합니다 무작위 유틸리티 우리는 한 달 전에 이것에 대한 자습서 비디오를 만들었습니다 이제 관심이 있다면 우리는 픽셀 데이터를 배포해야합니다 그들로부터 캔버스를 생성하고 클래스 이름을 할당 한 다음 클래스 이름을 래퍼 마지막 단계는 애니메이션을 추가하는 것입니다 먼저 페이드를 시작합니다

jQuery 페이드 아웃을 사용하여 원본 콘텐츠를 버리고 각각의 캔버스에 대해 먼저 세 개의 애니메이션을 추가합니다 흐림 효과를 추가하여 변형을 부드럽게 만들거나 그것은 pixelated 봐 것입니다 두 번째는 픽셀을 원본에서 멀리 이동시키는 것입니다 우리는 시뮬레이션을 위해 랜덤 값을 사용하여 회전과 변환을 모두 추가합니다 먼지 효과와 세 번째는 퇴색하여 먼지 입자를 퇴색시킵니다 부분은 jQuery가 흐림을 직접 지원하지 않거나 애니메이션을 변형하지 않기 때문에 그것들을위한 함수를 수동으로 생성한다

나는 또한 캔버스 사이에 작은 지연을 추가한다 CSS쪽에 위쪽에서 아래쪽 페이딩 애니메이션을 만들려면별로 도움이되지 않습니다 중앙에 모든 것을 표시하고 스냅 버튼에 대한 기본 스타일 만 플렉스 표시 이펙트와 관련된 것은 여기 절대 위치입니다 이것은 모든 것을 만들기위한 것입니다 캔버스는 같은 위치에 머물러 있으며 나머지 애니메이션은 자바 스크립트 그래서 그것이 작동하는 방법 그것은 그들을 얻을 수있는 몇 시간이 걸렸습니다

받아 들일 것이 많고 복잡하다는 것을 알고 있습니다 질문이나 의견 나는 우리의 웹 사이트에 소스 코드를 게시 할 것입니다 마침내 아래의 설명 상자에서이 동영상에 대한 모든 것이 여러분에게 희망이됩니다 이 채널을 처음 사용하는 경우, 좋아하거나 구독하는 것을 잊지 말고 즐기십시오 다음 비디오를 위해 계속 지켜보고 다음에 뵙겠습니다 bye