WebGL 3D 랜딩 페이지 만들기

Sep 14, 2025

어떻게

(이미지 크레디트 : 미래)

WebGL 3D 랜딩 페이지를 만드는 것은 잠재 고객에게 훌륭한 첫인상을 만드는 한 가지 방법입니다. WebGL을 사용하면 브라우저에서 고품질의 시각적 콘텐츠를 전달할 수 있습니다. 플러그인이나 특별한 요구 사항없이 할 수 있습니다. 모든 현대적인 브라우저는 WebGL을 모바일 장치 및 태블릿과 함께 지원합니다. WebGL을 사용하면 놀라운 3D 장면을 만들 수 있습니다. WebVR 경험에 전원을 공급하고 비디오 조작, 렌더링 그래픽 쉐이더 등을 더 많이 할 수 있습니다.

이 튜토리얼에서는 허구의 영화 스튜디오, 상대 스튜디오에 대한 방문 페이지를 만들 것입니다. 이 개념은 마우스 상호 작용에 대한 응답으로 신비한 물체가 반영되고 회전 할 때 개념이 극적이고 시각적으로 결합됩니다. 입자는 그것 주위를 주위로 움직여서 색을 변화시킵니다. 이 대화 형 페이지를 만드는 각 단계를 통해 작업하면 프로젝트를 위해 자신의 프로젝트를 생성 할 수 있습니다 (추가 영감을 위해서는 우리의 게시물을 참조하십시오. 착륙 페이지 짐마자

웹용 강력한 3D 렌더링 라이브러리 인 Three.js의 포함 된 기능 만 사용할 수 있습니다. 자신의 이미지를 텍스처로 사용하여 고유하게 만들 수 있습니다. 또한 표면 세부 사항을 향상시키는 메시, 조명 및 텍스처를 활용하여 환경 맵을 사용하는 방법과 깊이와 관심을위한 레이어를 추가하는 방법에 대해 알아보십시오.

시작하기에 충분할만큼 충분히 있어야하며 다음 프로젝트에 연료를 공급해야합니다.

시작하기 전에, 이 자습서의 파일을 다운로드하십시오 ...에

01. 기본 HTML 설정

시작하려면 3D 장면을 볼 수있는 곳이 필요합니다. 기본 HTML 파일을 설정하고 3.js에 대한 링크를 포함하십시오. 이것은 외부에서 호스팅되거나 추가 할 수 있습니다. 3.js 저장소 여기 : ...에 일부 간단한 CSS를 추가하여 페이지 전체 화면을 만들고 스크롤 막대를 제거하십시오. 로컬 웹 서버에 파일을 저장하므로 테스트 할 준비가되면 HTML을 제공 할 수 있습니다. 시작하려면 다음 코드를 추가하십시오.

 & lt; Doctype HTML & gt;
& lt; html & gt;
& lt; head & gt;
& lt; 타이틀 & gt; 상대 스튜디오 & lt; / title & gt;
& lt; script src = "libs / three.min.js"& gt; & lt; / script & gt;
& lt; 스타일 & gt;
html, body {여백 : 0; 패딩 : 0; 오버플로 : 숨김; }
& lt; style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; script & gt;
// 3D 코드가 있습니다
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

02. 전역 변형을 추가합니다

나머지 코드 전반에 걸쳐 참조에 대한 변수가 필요합니다. 지금 당장 세트하십시오. 여기에는 입자를 잡는 어레이, Tetrahedron, Mouse, RayCaster 및 Lights 용의 변수가 포함됩니다.

스크립트 태그 내부에서 다음 코드를 추가하여 시작하십시오.

 // vars.
var num = 30;
var 객체 = [];
var raycaster = new three.raycaster ();
VAR 마우스 = 새로운 3. 벡터 2 ();
var light, t;

03. 장면, 카메라 및 렌더링을 추가하십시오

우리는 먼저 모든 객체가 포함될 장면을 추가해야합니다. 그런 다음 우리는 그것의 내에서 움직일 수있는 카메라를 추가하고, 우리가 필요로하는 것처럼, 틸팅 및 움직일 수 있습니다. 첫 번째 속성은보기 분야입니다. 두 번째는 종횡비입니다. 또한 세 번째 및 네 번째 속성에 가까운 클리핑 플레인을 정의 할 수도 있습니다. 마지막으로 장면을 캔버스에 그리기 처리하는 렌더러를 추가하십시오.

스크립트 태그에서 다음 코드를 추가하십시오.

 // 카메라를 만듭니다
var camera = new three.PerspectiveCamera.
(65, window.innerWidth / window.innerHeight,
0.1, 1000);
camera.position.set (0.0,0.0,5);
// 장면을 만듭니다
VAR 장면 = 새로운 3.scene ();

// 렌더링을 만듭니다
var renderer = new three.webglrenderer (
{antialias : true});
renderer.setsize (window.innerWidth, 창).
innerheight);
document.body.appendchild (renderer.domelement.
);

04. 스포트라이트를 추가하십시오

그런 다음 장면에 빛을 추가해야합니다. Three.js는 포인트, 방향성, 주위 및 스포트라이트를 포함한 다양한 조명이 제공됩니다. 이것을 위해 스포트라이트를 사용하십시오. 나중에 원하는 경우 위치와 지향성 속성을 제공하고 그림자를 던질 수 있습니다.

스포트라이트를 추가하려면 다음 코드를 추가하십시오.

 // 스포트 라이트를 만듭니다
빛 = 새로운 3.SPTLIGHT (0xccddff, .8);
light.position.set (0,0,5);
Scene.add (빛);

05. 애니메이션 루프를 추가하십시오

'렌더링 루프'라고 불리는 경우에도 애니메이션 루프는 초당 60 번 이상적이라고합니다. 필름은 초당 24 프레임 (FPS)에서 실행되며, 이는 눈을 차단하지 않는 일정한 움직임을 보게 될 정도로 빠릅니다. 컴퓨터 애니메이션에서 우리는 최소한 30fps이지만 이상적으로 60fps를 목표로합니다. 이렇게하면 프레임이 주기적으로 떨어지더라도 매우 부드러운 시각적 성능을 보장합니다.

우리는이 애니메이션 루프를 requestAnimationFrame 함수에 바인딩합니다.이 기능은 두 가지를 수행합니다. 첫째, 브라우저가 다음 프레임을 렌더링 할 준비가되도록합니다. 또한 애니메이션이 더 이상 해당 브라우저 탭을 보지 않고 렌더링을 일시 중지 할 수 있음을 의미합니다.

애니메이션 루프에서 장면을 렌더링하려면이 코드를 추가하십시오.

 varnimate = function () {
requestanimationFrame (애니메이션);
Renderer.Render (장면, 카메라);
};

// 애니메이션 루프를 시작합니다
애니메이션 ();

06. 지상 질감을 적재하십시오

그런 다음 장면을위한 땅을 만듭니다. 시작하려면 사용할 이미지를로드해야합니다. 지상과 벽면과 같은 것들에 대한 텍스처는 자신의 사진을 찍고 조심스럽게 자르기 가장자리를 조심스럽게 자르면서 만들 수 있습니다. Photoshop CC. ...에 그들이 멋지게 타일 수 있는지 확인하십시오. 빠르게 시작하려면 온라인으로 훌륭한 도서관이 있습니다. 무료 텍스처 ...에

타일을 선택할 수 있습니다. 이것은 당신이 그들을 나란히 놓으면 에지가 원활하게 혼합 될 것이라는 것을 의미합니다. 이를 위해 타일이나 돌처럼 선택할 수 있습니다. 텍스처 랩 옵션을 사용하여이를 위해 포장을 반복합니다. 이 예제는 12x12 반복을 사용합니다. 장면을 테스트하면 이미지에 맞게이를 조정하십시오.

 // 지상 질감을로드하십시오
var texture = new three.textureLoader ().
로드 ( "자산 / stone.jpg");
texture.Wraps = texture.wrapt = 3입니다.
반복 랩핑;
texture.repeat.set (12,12);

07. 지상 재료를 만듭니다

3.JS에는 사용할 다양한 재료 유형이 포함되어 있습니다. 자료는 3D 물체를 다루는 피부로 생각됩니다. 빛이나 뇌색 또는 얇은 물질 쉐이더 재료에 반응하지 않는 기본 자료를 사용할 수 있습니다. 사용자 정의 셰이더 자료도 사용할 수 있습니다. 이 땅에서는 물리적 물질을 사용하십시오. 그것은 매우 현실적인 모양을 가지고 빛에 매우 잘 반응합니다. 확산 맵으로로드 한 텍스처를 사용하고 특정 텍스처가없는 경우 범프맵으로 사용하십시오.

 // 지상 재료를 만듭니다
material = new three.meshphysicalmaterial ({맵 : 텍스처, 범프맵 : 텍스처});

08. 지상 메쉬 만들기

3D 객체의 모양을 정의하는 물질 (피부)을 결합하면 메쉬를 만듭니다. 땅을 위해 간단한 계획이 필요합니다. 재료 쉐이더와 텍스처는 복잡한 표면 세부 사항의 환상을 만듭니다.

지상 메쉬를 만드는 데 다음 코드를 추가하고 좋은 각도로 회전하고 카메라 아래로 놓으십시오. 이것이 어떻게 보이는지 보려면 코드를 실행하십시오. 문자로 전화 해야하는 코드를 조정하십시오.

 // 그라운드 메쉬 생성
var geometry = new three.planebuffergeometry.
(100,100);
var ground = new three.mesh (기하학,
재료 );
Ground.rotation.z = math.pi / 180 * -45;
Ground.rotation.x = math.pi / 180 * -90;
ground.position.y = -2.0;
Scene.add (접지);

09. 목표를 적재하십시오

그런 다음 초점 이익을 위해 중앙 3D 객체를 추가합니다. 이것은 당신의 현장의 별이므로 그것을 덮기를 원하는 질감을 선택하십시오. 참고 :이 객체를 매우 반사하게 만들 수 있으므로 여기에 당신이 하중의 질감은 땅이 땅보다 미묘한 모양입니다.

 // 객체 텍스처를로드합니다
var texture = new three.textureLoader ().
로드 ( "자산 / ROCK_01_Diffususion.jpg");

10. 환경 맵을 만듭니다

그런 다음 표면에 반영 될 객체 주변의 환경을 만듭니다. 당신이 원하는 경우 장면을 Scene.Background 속성으로 장면에 추가 할 수도 있습니다. 환경을로드하려면 cubeTextureLoader를 사용합니다. 사용하는 이미지는 큐브의 내부가 큐브지도라고하는 원활한 이미지를 형성하는 6 개의 이미지 여야합니다.

 var envmap = new three.cubetextureLoader ()
.setPath ( '자산 /')
.LOAD ([ 'px.jpg', 'nx.jpg', 'py.jpg', 'NY)'
jpg ','pz.jpg ','nz.jpg ']);

11. Tetrahedon을 추가하십시오

three.js에는 장면에 사용할 수있는 많은 기본 형상이 제공됩니다. 냉각기 중 하나는 테트라 헤드론입니다. 객체의 얼굴 수를 정의하는 것은 반경과 'Detail'매개 변수를 사용합니다.

다음 코드로 장면에 하나를 추가하십시오.

 // tetrahedron을 만듭니다
VAR 지오메트리 = 새로운 3.
TetrahedronBuffergeometry (2,0);
var material = new three.meshphysicalmaterial
({맵 : 텍스처, envmap : envmap,
금속성 : 1.0, 거칠기 : 0.0});
t = new three.mesh (기하학, 재료);
t.rotation.x = math.pi / 180 * -10;
Scene.add (t);

12. 회전 및 카메라 목표를 추가하십시오

카메라가 항상 기본 개체를보고 있는지 확인하려면 Camera.LookAT 기능을 사용합니다. 객체에 몇 가지 주변 회전을 추가 할 수도 있습니다.

애니메이션 기능 코드를 업데이트하여 이렇게보십시오.

 RequestAnimationFrame (애니메이션);
t.rotation.y - = 0.005;
camera.lookat (t.position);
Renderer.Render (장면, 카메라);

13. 입자 루프를 추가합니다

그런 다음 장면에 일부 주변 입자를 추가하십시오. 이것들은 나중에 추가 될뿐만 아니라 상호 작용할 수있는 전경 비디오 루프와 잘 어울릴 것입니다. 다중 입자를 만드는 데 사용할 코드를 보유하고있는 간단한 '루프'루프를 추가하십시오.

(i = 0; i ≤ num; i ++) { // 입자 코드가 여기로갑니다 }

14. 입자 메쉬 생성

가장 먼저 할 일은 입자 객체를 만듭니다. 구체, 스프라이트 또는 원하는 모든 물체 로이 작업을 수행 할 수 있습니다. 지금은 단순한 분야를 사용해보십시오.

for 루프 내부 다음 코드를 추가하십시오.

 // 새로운 메쉬 생성
VAR 지오메트리 = 새로운 3.SphereBufferGeometry (.1,6,6);
var material = new three.meshphysicalMaterial ({envmap : envmap, metalness : 1.0});
var particle = new three.mesh (기하학, 재료);

15. 임의의 위치와 거리를 설정하십시오

입자는 궤도를 궤도 할 것이며 무작위로 배치되어 공간을 멋지게 채우고 유기 모습을 가질 것입니다. 불규칙한 위치를 설정 한 다음 각 입자에 대해 일정한 거리를 할당하는 다음 코드를 추가하십시오.

 // 무작위 위치를 설정합니다
particle.position.set (math.random () * 100.0 -
50.0,0.0, math.random () * - 10.0);
// calc distnace를 일정하고 할당합니다
반대하다
var a = new three.Vector3 (0, 0, 0);
var b = particle.position;
var d = a.distanceto (b);
입자. distance = d;

16. 궤도에 대한 각도를 설정하십시오

궤도를 더 빨리 애니메이닝하려면 궤도에 대한 각도 상수를 추가하고 입자의 속성으로 보관하십시오. 다음 코드를 추가하여 이러한 임의의 컨텐츠 각도를 정의하십시오.

 // 2 개의 무작위이지만 일정한 각도 정의
라디안에서
particle.radians = math.random () * 360 * 수학.
PI / 180; // 초기 각도
particle.radians2 = math.random () * 360 * 수학.
PI / 180; // 초기 각도

17. 장면과 수집에 입자를 추가하십시오

마지막으로 장면에 입자를 추가하고 이전에 정의한 객체 배열에. 이렇게하면 나중에 쉽게 모든 입자를 반복 할 수 있습니다.

 // 장면에 개체를 추가합니다
Scene.add (입자);
// 컬렉션에 추가합니다
objects.push (입자);

18. 입자에 애니메이션을 추가하십시오

그런 다음 입자 객체의 위치와 회전을 업데이트해야합니다. 장면 센터에서 일정한 거리에서 이러한 궤도. 애니메이션 기능에 다음 코드를 추가하십시오.

(i = 0; i ≤ num; i ++) { var o = 객체 [i]; o.rotation.y + =. 01; if (i % 2 == 0) { O.Radians +. 005; o.Radians2 + =. 005; } else { O.Radians - =. 005; O.Radians2 - 005; 005; } o.position.x = (math.cos (o.radians) * o.distance); o.position.z = (math.sin (o.radians) * o.distance); o.position.y = (math.sin (o.radians2) * o.distance * .5); }

19. 제목을 추가하십시오

그런 다음 화면 중앙에 제목을 추가합니다. 브랜드를 소개하는 이름입니다. 제목에 대한 편지 간격은 훌륭한 영화를 제공합니다. 원하는 글꼴 / 스타일을 사용하십시오 만, 영감을 얻으려면 필름 제목 참조를 살펴보십시오. 우리의 목록을 참조하십시오 무료 글꼴 우리가 가장 좋아하는 다운로드 할 수없는 글꼴 목록을 보려면.

먼저 제목에 대한 DOM 요소를 추가하십시오. 닫는 본문 태그 전에 스크립트 태그 뒤에이를 추가하십시오.

상대 스튜디오 (reloth sudios);

파일 맨 위에있는 스타일 태그에 제목에 다음 스타일을 추가하십시오.

H1 {색상 : 흰색; 위치 : 절대; 상단 : 50 %;
Z- 색인 : 100; 너비 : 100 %; 텍스트 - 정렬 : 센터;
변환 : 번역 (0, -100 %); 글꼴 - 가족 :
'Raleway', Sans-serif; 글꼴 무게 : 100;
편지 간격 : 40px; 텍스트 변환 :
대문자; 글꼴 크기 : 16px; }

20. 비디오 루프를 추가하십시오

착륙에 깊이를 만드는 좋은 트릭은 작은 비디오 루프를 추가하는 것입니다. 연기, 먼지 또는 입자를 사용할 수 있습니다. 이들은 온라인에서 널리 사용 가능하거나 다양한 비디오 및 영화 제작 패키지의 일부입니다. H1 태그 후 다음 비디오 태그를 추가하십시오. '음소거'및 자동 재생으로 설정하려는 경우를 주목하십시오. 이렇게하면 동영상이 모바일 장치에서도 모바일 장치에서 플레이 할 수 있습니다.

 & lt; Video ID = "VideoBacker"루프 Src = "자산 /
snow.mp4 "자동 재생 음소거 & gt; & lt; / video & gt;

비디오 스타일을 위해 페이지 머리에 스타일에 다음 CSS를 추가하십시오.

 #videobacker {배경 크기 : 덮개;
객체 적합 : 덮개; Z- 색인 : 9; 불투명도 : .3;
위치 : 절대; 상단 : 0px; 왼쪽 : 0px;
너비 : 100VW; 높이 : 100VH; 전환 : 1S.
불투명도가 편리하게;

21. 편지 복싱을 추가하십시오

정말로 착륙 페이지를 영화 틱 스타일을 제공하려면 편지 상자를 페이지에 추가하십시오.

이를 위해 DIV 요소를 추가하여 시작하십시오.

 & lt; div class = 'bar-top'& gt; & lt; / div & gt;
& lt; div class = '바 - 바닥'& gt; & lt; / div & gt;

그런 다음 스타일을 업데이트 하여이 두 개의 검은 색 막대에 대한 스타일을 추가하십시오. 이러한 스타일을 취향과 필요에 맞게 조정할 수 있습니다.

. 바 - 상단 {배경색 : 검정색;
높이 : 100px; 위치 : 절대; TOP : 0;
왼쪽 : 0; Z- 색인 : 100; 너비 : 100VW;}
. 바 - 아래쪽 {배경색 - 색상 : 검정색;
높이 : 100px; 위치 : 절대; 바닥 : 0;
왼쪽 : 0; Z- 색인 : 100; 너비 : 100VW;}

이 기사는 원래 웹 디자이너의 문제 287에 등장했습니다. 구매 문제 287. 또는 여기를 구독하십시오 ...에

자세히보기 :

웹 구성 요소 : 궁극적 인 가이드
레이어드 시차 효과를 만드는 방법
CSS를 통해 SVG에 애니메이션을 추가하는 방법

WebGL 3D 랜딩 페이지 만들기

01. 기본 HTML 설정

02. 전역 변형을 추가합니다

03. 장면, 카메라 및 렌더링을 추가하십시오

04. 스포트라이트를 추가하십시오

05. 애니메이션 루프를 추가하십시오

06. 지상 질감을 적재하십시오

07. 지상 재료를 만듭니다

08. 지상 메쉬 만들기

09. 목표를 적재하십시오

10. 환경 맵을 만듭니다

11. Tetrahedon을 추가하십시오

12. 회전 및 카메라 목표를 추가하십시오

13. 입자 루프를 추가합니다

14. 입자 메쉬 생성

15. 임의의 위치와 거리를 설정하십시오

16. 궤도에 대한 각도를 설정하십시오

17. 장면과 수집에 입자를 추가하십시오

18. 입자에 애니메이션을 추가하십시오

19. 제목을 추가하십시오

20. 비디오 루프를 추가하십시오

21. 편지 복싱을 추가하십시오

어떻게 - 가장 인기있는 기사

WordPress 사이트 속도 향상 및 최적화 방법

더 현실적인 그림을 그리는 방법

만화 클래식 다시 만들기

친 화성 디자이너 : 그리드를 사용하는 방법

믿을만한 판타지 짐승을 디자인하는 방법

Photoshop에서 사진을 3D 애니메이션으로 켜십시오

창조적 인 어셈블리가있는 게임 캐릭터 수준 업

그래픽 디자이너를위한 3D 텍스트 자습서

카테고리