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 배경색 변경이 있습니다 이 예제를 반응 형으로 만들려면이 튜토리얼을 업데이트해야합니다 사용자가 브라우저 창 크기를 조정할 때 가로 세로 비율이 있으므로 핸들러를 만들어 보겠습니다 카메라를 재설정하고 설정을 렌더링하는 기능 그런 다음 크기 조정 이벤트로 바인딩하십시오 이 튜토리얼의 모든 것이 당신이 더 많은 것을보고 싶다면 즐기길 바랍니다

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

Create JavaScript 3D World in 5 Minutes – Three.js Skybox Tutorial

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

이 튜토리얼에서 채널을 보여 드리겠습니다 skybox 기술과 threejs로 쉽게 3D 세계를 만드는 법 몇 분만 기다려주세요 skybox의 개념은 정말 간단합니다 여러분의 3d 세계를 담을 큐브를 만드십시오

큐브의 각면에 올바른 텍스처를 할당하십시오 이 튜토리얼에서는 스카이 박스 이미지를 무료 및 유료 버전으로 온라인으로 볼 수있다 opengameartorg에서 다운로드 한 다음 모든 이미지를 웹 디렉토리는 다음과 같이 평소와 같이 threejs에 대한 기본 설정으로 시작합니다

먼저 라이브러리의 최신 버전을 포함시킨 다음 장면을 만들 것입니다 카메라와 렌더러 설정 현재 뷰포트를 렌더러 크기로 사용하고 캔버스 요소로 페이지에 추가합니다 다음으로 orbitControljs를 설정하여 카메라를 마우스로 제어 할 수있게 할 것입니다 여기에 자료를 저장할 배열을 만드는 핵심 부분이 있습니다

큐브의 각면이 텍스처 로더를 사용하여 이미지를로드합니다 일단로드되면 각 머티리얼을 배열로 밀어 넣습니다 우리는 meshBasicMaterial을 사용할 것입니다 하늘 상자의 경우이 재료는 빛의 영향을받지 않기 때문에 우리는 가지고 있지 않습니다 조명을 설정하고 그것을 볼 수있게되면 상자를 만듭니다 기하학을 만들고이를 재료 배열과 결합하여 대기열을 만들고 장면에 추가됨 마지막으로 장면을 렌더링하는 재귀 함수 루프를 만듭니다

이제 결과를 확인하면 아무것도 볼 수 없지만 축소하면 왜 큐브의 바깥쪽에 텍스처를 할당했는지 알 수 있습니다 머티리얼의 side 속성을 threebackside로 설정하여이 문제를 해결하십시오 좋아 보이는군요 너무 많이 축소하면 문제가 생깁니다

skybox 그래서 우리는 그렇게 줌 거리를 제한해야합니다 그리고 그것은 당신이이 짧은 튜토리얼을 즐겼다는 것을 희망합니다 그리고 이것을 사랑한다면 비디오를 좋아해 주셔서 감사합니다 보고 다음에 보자 안녕히 가세요

Add 3D Model to WebSite in 5 Minutes – Three.js Tutorial

이 튜토리얼에서 빨간색 스테이플러 채널에 오신 것을 환영합니다 360도 뷰어로 3D 모델을 웹 사이트에 올리는 방법 몇 분 정도 준비 완료되었으므로이 튜토리얼에서 세 가지를 사용하려고합니다

js 가장 인기있는 3 차원 자바 스크립트 라이브러리 중 하나 적합한 3D 모델을 찾으려면 인터넷 ใ threejs와 함께 모델을 사용하는 것이 좋습니다 작은 파일 크기와 효율성으로 인해 gltf 형식을 사용할 수 있으므로 하나는 이미 gltf 형식이지만 이미 다른 모델을 사용하고 있다면 형식 threejs는 또한 FBX 및 obj 파일을 지원합니다 이제는 일단 모델을 다운로드하면 모든 파일과 폴더를 웹에 넣을 것입니다 다음으로 자바 스크립트에 대한 작업을 시작합니다

당신의 페이지에 threejs의 버전은 다음 장면을 만들고, 배경색을 설정합니다 및 카메라 이전의 threejs Basics에 대한 자세한 내용을 볼 수 있습니다

아래의 링크에서 튜토리얼 우리의 모델을 조명하기 위해 부드러운 흰색 주변 광을 추가하고 마침내 우리는 현재 뷰포트 종횡비를 사용하여 WebGL 렌더러를 설정하고 우리 페이지에 출력 캔버스 기본 설정이 완료되면 모델로드가 시작됩니다 우리는 gltf 로더 클래스를 사용하여 load 메소드를 사용하여 모델 파일을로드 한 다음 장면에 대한 모델을 만들고 콜백 함수에서로드가 완료되면 렌더링합니다 우리가 현재보고있는 것은 우리 모두가 카메라를 움직일 필요가있는 차의 내부입니다 밖에서뿐만 아니라 자동차 크기를 축소해서 카메라를 넣을거야 자동차 정면에서 45도 회전 차를 축소하려면 콜백 내부에 차 모델을 가져올 것입니다

함수를 사용하고 scaleset을 사용하여 지금 당신이 절반으로 자동차 크기를 줄일거야 우리의 유일한 광원이기 때문에 차가 색이 잘못되었다는 것을 알게 될 것입니다 주변 광은 장면의 모든 물체를 비추는 빛입니다 모든 방향에서 동일하게 그림자 나 반사를 주조하지 않습니다 다른 유형의 빛을 추가하여이를 해결할 수 있습니다

위의 방향성 광원 캐스트 그림자 속성을 true로 설정하려고합니다 그리고 장면에 추가 한 다음 4 포인트 조명과 장소도 추가 할 것입니다 차를 중심으로하는 빛은 실제 세계의 전구와 비슷합니다 자동으로 그림자를 드리 우다 거의 끝나면 사용자가 회전 할 수있게 360도 뷰어를 추가 할 것입니다

우리는 threejs orbitControl 플러그인을 먼저 사용합니다 orbitControlsjs를 github에서 가져 와서 페이지에 포함시킨 다음 컨트롤을 만드십시오 카메라의 객체를 추적하고 마우스를 추적하기 위해 변경 이벤트 리스너를 추가합니다

이제 한 번 렌더링 대신에 컨트롤을 사용하여 애니메이션 루프는 사용자가 기본적으로 카메라를 회전시킬 때 장면을 업데이트합니다 이전 자습서와 동일하게 장면을 렌더링하는 함수를 만들면됩니다 재귀 루프를 시작하기 위해 요청 애니메이션 프레임을 호출한다 그리고 그게 다야! 설명 상자에이 튜토리얼 코드를 찾을 수있다 아래 사람들이이 튜토리얼을 즐겼으며 좋아하고 구독하는 것을 잊지 마십시오

보고 지켜봐 주셔서 고맙습니다

Realistic Rain Effect Three.js Tutorial

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

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

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

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

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

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

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

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

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

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

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

Three.js Tutorial | Part 1: What is Three.js | Beginner

안녕하세요이 비디오의 Red Stapler 채널에 오신 것을 환영합니다

threejs는 자바 스크립트 라이브러리 및 API로 3D 또는 2D를 생성 할 수있게합니다 WebGL을 직접 사용하지 않고 웹 페이지의 그래픽을 쉽게 사용할 수 있습니다 십자가에 몰입 형 웹 경험을 제공하는 자바 스크립트 브라우저 지원 준비 완료 threejs는 기본적으로 웹 레이어 위에 만들어져 더 쉽게 웹 레이어를 만드는 추상 레이어입니다

모두를 사용하면 아무 것도 다운로드하지 않고도 웹 브라우저를 사용할 수 있습니다 3D 그래픽을 경험하기 위해 추가 프레임 워크 또는 응용 프로그램이 있습니다 3 회 이야기가 있기 때문에 3 회 js 구현의 몇 가지 데모 자바 스크립트를 기반으로 3D 사이에 상호 작용을 추가하는 것이 상대적으로 쉽습니다 키보드와 마우스 같은 객체와 사용자 인터페이스 웹 플랫폼에서 3D 게임을 만들기에 완벽하게 적합한 예가 여기 있습니다

3D 애니메이션 개체를 만드는 기본 단계에 대한 아이디어를 보여줍니다 threejs는 빈 웹 페이지이고 여기에 회전 큐브를 추가 할 것입니다 이제 github에서 최신 버전을 다운로드하여 포함 시키자 귀하의 페이지 스크립트 태그를 사용하여 먼저 우리는 카메라 각도를 설정하는 새로운 장면을 만들 것입니다 렌더러에서 생성 된 요소를 HTML에 추가합니다

본문에서는 높이와 깊이가 동일한 지오메트리를 만들고 할당 머티리얼과 색상을 추가 한 다음 큐브 객체를 장면에 추가하고 마침내 x 축을 중심으로 회전을 증가시키는 애니메이션 루프를 생성하고 그게 결과를 보도록하겠습니다 그래서 우리가 들어갈 소개를위한 것입니다 다음 튜토리얼에서 각 단계에 대해 자세히 설명하고 언제든지 구독 해주십시오 계속 지켜봐 주시거나이 비디오가 마음에 들었습니다 시청 해 주셔서 감사합니다

너 다음 비디오에서 너

Three.js Tutorial | Part 2: Hello World Cube | Beginner

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

이전의 두 번째 동영상입니다 튜토리얼 이전에 애니메이션 3D 큐브 개체를 만드는 방법을 간략히 설명했습니다 개체와 장면에 지금이 비디오에서 내가 할거야 추가 그것을 단계별로 설명하고 우리가 어떻게 그리고 왜 있는지에 대해 자세히 설명합니다 그것을 해봅시다 우리가해야 할 일은 장면을 만드는 것입니다

장면은 우리가 다음에 우리가 카메라와 조명 등등 객체를 추가 할 수있는 우주와 같습니다 우리가 고집 할 시간 동안 대부분 카메라를 설치해야합니다 당신이 가까이있는 물건을 더 많이 볼 수있는 일반적인 카메라 유형의 관점 멀리있을 때 더 작아서 카메라의 첫 번째 매개 변수는 시야각은 기본적으로 인식 각의 넓이입니다 75로 설정합시다 다음으로 우리는 현재 비트를 높이로 나눈 값을 사용할 종횡비입니다

다음으로 우리는 렌더러를 설정하려고합니다 렌더링 엔진은 이제 WebGL 렌더러를 사용하여 앤티 앨리어싱과 같은 렌더링 옵션 그리고 나서 setize 메소드를 사용하여 렌더링 해상도를 지정하자 현재 너비를 지정하고 렌더러에서 생성 된 종속 요소를 숨 깁니다 HTML 바디와 이제 우리는 우리가 가고있는 장면과 카메라 셋업을 가지고있다 처음으로 큐브를 만듭니다

우리는 그것을 기하학이라고 생각합니다 우리 객체의 뼈대에는 사용할 수있는 여러 가지 유형의 기하 구조가 있지만 같은 크기의 박스 지오메트리를 사용할 큐를 생성하려고합니다 모든 차원 이제 우리는 우리의 지오메트리를 커버하는 스킨이 필요할 것이므로 우리는 불투명도 반사와 같은 피부의 특성을 정의하는 재료 또는 텍스쳐는 현재 붉은 색으로 메쉬 기본 재료를 사용하고 우리는 우리의 기하학을 사용하여 메쉬 객체를 생성하여 큐브를 만들고 소재를 선택한 다음 큐브를 장면에 추가하십시오 마지막으로 렌더러 객체의 render 메소드를 호출하고 카메라가이 시점에서 검은 색 장면 만 볼 수 있기 때문에 카메라와 큐브는 현재 큐브의 위치를 ​​변경하는 데 필요한 동일한 지점에 있습니다 그것을 참조하십시오 또한 회전을 조금 바꿀 것입니다 그래서 우리의 큐브입니다

애니메이션을 만들려면 재귀 함수에서 애니메이션 루프를 만들어야합니다 먼저 각 프레임에 대한 액션을 정의하는 함수를 생성한다 회전을 조금 증가시키고 render 메소드를 호출하면 다음으로 requestanimationframe을 호출하면이 메서드는 브라우저의에 의해 호출됩니다 현재 디스플레이 새로 고침 속도는 일반적으로 초당 60 회이며 현재를 전달합니다 함수에 애니메이션을 적용하고 마지막으로 애니메이션 루프를 호출하여 애니메이션 루프를 시작하십시오 기능 그래서 그것은 three

js를 사용하여 간단한 3D 애니메이션을 만드는 방법의 기본입니다 다음 동영상에서 귀하의 웹 사이트는 각 지오메트리 유형을 더 파헤칠 것입니다 희망 사항이 있습니다 너는이 비디오를 좋아하고,이 비디오를 좋아하거나주고 싶으면 구독 해주세요 우리는 엄지 감사합니다 안녕히 주무세요