🟠 DESIGN IDEA

• 프로젝트 이름: DESIGN IDEA
• 사용한 언어: HTML, SCSS, JavaScript
• 사용한 JavaScript 라이브러리: GSAP, Three.js

Random Text 만들기

JavaScript

this.textLines = [8, 17, 21, 23, 26, 28, 30, 31, 32, 31, 30, 28, 26, 23, 21, 17, 8];
this.letters = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()';
this.textLines.map((length) => 
	Array.from({length}, () => this.letters[Math.floor(Math.random() * this.letters.length)]).join('')).join('\n');

1. 각 문자열의 길이를 담은 배열 this.textLines, 들어갈 문자가 담긴 this.letters를 변수로 만들기
2. this.textLines 배열을 map 함수로 순회하고, 각 라인의 길이를 지정하는 length를 매개변수로 만들기
3. Array.from 함수로 배열을 생성하고, length 객체를 통해 배열의 길이를 지정
4. 랜덤 문자로 들어갈 this.letters의 총 길이를 length를 사용하여 구하고, Math.random()을 곱하여 총 길이 내에서 랜덤한 숫자 만들기
5. 정수로 만들기 위해 Math.floor를 사용하고, this.letters[] 배열 안에 랜덤 숫자를 넣어서, 랜덤한 문자열들을 배열로 채우기
6. join('')을 사용하여 각 배열에 있는 랜덤한 문자열들을 합치고, join('\n')을 통해 각 문자열을 줄바꿈 문자 \n으로 결합하여 각 줄로 나누기

3D 로고 애니메이션

Three.js란?

Three.js는 웹 브라우저에서 3D 그래픽을 구현하기 위한 자바스크립트 라이브러리이며, WebGL을 기반으로 3D 애니메이션 및 그래픽을 보다 쉽게 만들 수 있게 합니다.

Three.js를 구성하는 기본 요소

• Scene - 3D 장면을 정의하는 기본적인 컨테이너
• Geometry - 3D 객체의 모양 및 구조 정의
• Texture - 3D 객체의 표면 이미지 입힐 때 사용
• Material - 3D 객체의 표면 특성(시각적 속성)을 정의하는 요소
• Light - 3D 씬에서 조명 효과를 구현하는 데 사용
• Camera - 3D 장면을 렌더링하기 위해 사용되는 시점 정의
• Mesh - 3D 공간에서 실제로 보이는 객체를 나타내는 요소 (Geometry + Material)
• Renderer - 3D 장면을 실제 화면에 렌더링하는 역할을 담당 (WebGL기반)

Javascript

Scene

 this.scene = new THREE.Scene();

1. 새로운 Three.js 장면(Scene) 생성하기

Geometry

 this.geometry = new THREE.SphereGeometry(1, 64, 32);

1. 반지름이 1인 구 모양의 3D 객체 생성, 64와 32는 구의 수평 및 수직 세그먼트 수이며, 세그먼트가 많을수록 구가 더 매끄럽게 보이게 됨

Texture

this.textureLoader = new THREE.TextureLoader();
this.texture = this.textureLoader.load('textures/logo-texture.png');
this.texture.colorSpace = THREE.SRGBColorSpace;
this.texture.offset.x = .25;
this.texture.generateMipmaps = false;

1. Three.js의 TextureLoader를 사용하여 3D 객체에 적용할 이미지 불러오기
2. 텍스처의 색상을 sRGBColorSpace로 설정하여 정확한 색상이 나올 수 있도록 하기
3. 텍스처의 위치를 x축 기준 .25 만큼 변경 (원하는 대로 텍스처의 위치 변경 가능)
4. generateMipmaps를 false로 설정 (Mipmaps 사용시 로고의 선명도가 떨어질 수 있음)

Mipmaps 란?

Mipmaps는 원본 텍스처의 여러 해상도를 포함하는 일련의 텍스처 이미지로, 각 레벨의 해상도는 이전 레벨의 절반 크기입니다. 예를 들어, 256x256 크기의 원본 텍스처가 있다면, 다음 레벨은 128x128, 그 다음은 64x64, 32x32, 16x16, 8x8, 4x4, 2x2, 그리고 1x1 크기로 줄어들게 되며, 카메라가 해당 객체에서 멀어질 때 GPU는 작은 크기의 텍스처를 사용하므로 렌더링이 더 빠르게 이루어집니다.
(2의 거듭제곱 해상도를 가진 이미지를 Three.js의 텍스처로 사용해야 하는 이유)

Material

this.material = new THREE.MeshBasicMaterial({map: this.texture});

1. 미리 로딩해둔 텍스처 즉, this.texture를 사용하여 Material에 맵핑하기
   (MeshBasicMaterial은 조명을 반영하지 않으며, 단순히 텍스처만 보여줌)

Camera

this.camera = new THREE.PerspectiveCamera(75, this.sizes.width / this.sizes.height, 0.1, 100);
this.camera.position.z = 1.66;
this.scene.add(this.camera);

1. 시야각 75도, 화면 비율 (캔버스의 너비 / 높이), 가시 범위 0.1 ~ 100의 Perspective Camera 만들기
2. 카메라를 z축 방향으로 1.66만큼 이동 (카메라의 위치 원하는 대로 설정 가능)
3. 카메라를 Scene에 추가

Mesh

this.mesh = new THREE.Mesh(this.geometry, this.material);
this.scene.add(this.mesh);

1. 미리 생성한 Geometry와 Material을 사용하여 Mesh 만들기
2. Mesh를 Scene에 추가

Renderer

this.renderer = new THREE.WebGLRenderer({
	canvas: this.canvas,
    antialias: true,
    alpha: true
});
this.renderer.setSize(this.sizes.width, this.sizes.height);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

1. WebGLRenderer를 생성하고, 렌더링에 사용할 캔버스 설정하기
2. antialias: true, alpha: true를 작성하여 앤티앨리어싱을 활성화하고, Renderer의 배경을 투명하게 만들기 (검은색이 기본 배경색으로 설정되어 있음)
3. Renderer의 크기 설정 (캔버스의 너비 / 높이)
4. Renderer의 픽셀 비율을 설정, Math.min을 사용하여 window.devicePixelRatio, 2 중 작은 값을 사용 (고해상도 디스플레이에서도 성능과 선명도를 최적화하기 위해서)

WebGLRenderer란?

Three.js에서 사용되는 WebGL 기반의 Renderer로, 웹 브라우저에서 3D 그래픽을 효율적으로 렌더링할 수 있도록 WebGL API를 활용합니다.

Animation

this.clock = new THREE.Clock();
const tick = () => {
	const elaspedTime = clock.getElapsedTime();
    this.mesh.rotation.y = elaspedTime * 1.2;
    this.renderer.render(this.scene, this.camera);
    window.requestAnimationFrame(tick);
};
tick();

1. Three.js에 내장되어 있는 Clock 함수를 사용하여 시간 측정 시작
2. 애니메이션 루프를 정의할 tick 함수 만들기
3. clock.getElaspedTime();을 사용하여 경과된 시간 측정 (Clock 함수가 시작된 시점부터)
4. 경과된 시간에 따라서 Mesh를 y축 방향으로 회전시키기 (경과된 시간에 원하는 숫자를 곱하여 애니메이션의 스피드 조정)
5. Scene과 Camera를 사용하여 렌더링 하기
6. window.requestAnimationFrame(tick);을 호출하여 매 프레임마다 tick 함수를 호출하기
7. tick 함수를 호출하여 애니메이션 시작

requestAnimationFrame이란?

브라우저에서 애니메이션을 효율적으로 수행할 수 있도록 지원하는 JavaScript 함수입니다.
이 함수는 브라우저의 재페인트 주기에 맞춰 콜백 함수를 실행함으로써, CPU와 GPU의 사용을 최적화하고, 애니메이션의 부드러움을 보장합니다.

3D Carousel(슬라이더) 만들기

HTML

<div class="group-team">
...
  <div class="team-area">
    <ul class="team-list">
      <li class="team-item">
        <img src="./images/team-img.png" alt="team-img">
      	  <div class="desc-box">
            ...
          </div>
      </li>
      <li class="team-item">
    	...
      </li>
      <li class="team-item">
    	...
      </li>
    </ul>
  </div>
</div>

SCSS

.team-area{
  position: relative;
  width: 720px;
  aspect-ratio: 1/1;
  perspective: 1200px;
  margin: auto 0;
  .team-list{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateZ(-400px);
    .team-item{
      position: absolute;
      top: 0;left: 0;
      width: 100%;height: 100%;
      &:first-child{
        transform: rotateY(0) translateZ(400px);
      }
      &:nth-child(2){
        transform: rotateY(120deg) translateZ(400px);
      }
      &:last-child{
        transform: rotateY(240deg) translateZ(400px);
      }
      ...
    }
  }
}

JavaScript

const teamTl = gsap.timeline({
  scrollTrigger: {
  	trigger: '.group-team',
    start: '+=0',
    end: '+=2500',
    scrub: 1,
    pin: !0,
  }
});
teamTl.to('.team-list',{
  rotateY: 240
  }, 'a');

1. .team-area의 너비 및 높이를 설정하고, perspective 값 설정하기

perspective 란?

CSS의 perspective 속성은 3D 공간에서 자식을 보는 시점의 깊이를 정의하는 데 사용됩니다.
(부모 요소에 적용되며, 이 부모 요소의 자식 요소들에 3D 효과가 적용)

2. .team-list에 transform-style: preserve-3d; 적용 후, z축 방향으로 -400px 만큼 이동 (임의의 값 설정 가능)

preserve-3d 란?

CSS에서 3D 변환을 처리하는 방법을 지정, 요소가 3D 공간에서 자식 요소들을 어떻게 렌더링할지를 결정
(.team-list의 자식 요소인 .team-item이 3D 공간에서 렌더링 됨)

3. .team-item에 position: absolute;를 사용하여 겹치게 만들고, 각각 rotateY 속성을 사용하여 원 모양으로 배치시키기 (총 3개의 슬라이드가 있고, 원의 각도는 360도이기 때문에, 각 요소에 0도, 120도, 240도의 값을 작성)

4. .team-list 에서 z축 방향으로 -400px 만큼 이동했으므로, .team-item에는 z축 방향으로 400px 만큼 이동 (값은 임의로 설정 가능, .team-area의 너비 720px를 .team-item에 그대로 적용하기 위해서)

5. 변수 teamTl에 gsap 타임라인 지정 (타임라인 내에서 scrollTrigger 설정을 사용하여 스크롤에 따라 애니메이션이 동작할 수 있도록 만들기)

6. .team-area의 컨테이너인 .group-team을 트리거 요소로 설정

7. start와 end 값 설정 (0px 트리거 요소가 처음 나타날때 시작하고 2500px 만큼 스크롤 된 후 애니메이션 종료)

8. pin을 사용하여 애니메이션이 끝날 때까지 트리거 요소 고정시키기

9. teamTl.to를 사용하여 .team-list에 애니메이션을 정의하고 타임라인에 추가

10. .team-list에 rotateY 값을 적용하여 애니메이션 완성하기 (한 요소가 회전하여 화면 중앙에 위치시키려면 120도 만큼 필요, 모든 요소들이 중앙에 한번씩 위치하려면 총 240도 필요)