[HTML/CSS/JS] Three.js를 활용한 3D 모델 추가, 자동차 소개 페이지 만들기

코딩애플님의 동영상 강의를 보다가 흥미로운 영상을 발견했다.

https://youtu.be/CojyGfCMvuU

Three.js 라이브러리를 사용하면 3D 모델을 띄울 수 있다고 한다!

재밌어보여서 간단한 페이지를 만들며 실습해보았다.

 

Three.js란?

• 웹페이지에 3D 객체를 쉽게 렌더링할 수 있도록 도와주는 JS 3D 라이브러리이다.
• WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단히 사용 가능하다.
  • WebGL(Web Graphics Library)
    • 웹 상에서 2D 및 3D 그래픽을 사용할 수 있도록 한다.
    • HTML5의 <canvas> 태그를 사용한다.
    • 이것만으로 구현하기에는 복잡… ⇒ Three.js는 3D 요소의 처리를 도와 직관적인 코드를 작성하도록 도와준다.
• Scene, Camera, Renderer로 나뉜다

1. Scene: 랜더링할 모든 객체와 광원을 저장하는 공간(필수 생성)
2. Camera: Scene 객체를 어떻게 촬영하여 보여줄 것인가를 결정
   1. PerspectiveCamera - 원근법 O
   2. OrthographicCamera - 원근법 무시
3. Renderer: Three.js의 핵심 객체, Scene과 Camera 객체를 넘겨 받아 랜더링한다.

출처 https://velog.io/@seongmini/Three.js-3D-그래픽-입문해보기

 

3D model 브라우저에 보여주는 법

https://sketchfab.com/

이 사이트에서 자기가 마음에 드는 3D 모델을 고를 수 있다. glTF 확장자 파일을 다운로드한다.

 

1. 장면 만들기 / 2. 브라우저에 랜딩하기

let scene1 = new THREE.Scene();
let renderer1 = new THREE.WebGLRenderer({
    canvas : document.querySelector('#canvas'),
    antialias : true, // 테두리 계단현상(픽셀 깨짐) 보완
    alpha: true // 배경 투명하게
});

3D model 보여줄 때 필요한 것들

1. 카메라 2. 조명 3. 배경

• 카메라 추가하기

let camera1 = new THREE.PerspectiveCamera(50, 1.2);
camera1.position.set(0,0,5);

• 물체를 보기 위해 조명 추가하기
• 매개 변수로 빛의 색상인 color와 빛의 강도를 의미하는 intensity
  • AmbientLight ⇒ 빛의 시작점 없이, 물체의 모든 면을 골고루 비춰주는 빛이다.
  • HemisphereLight ⇒ 하늘과 바닥 두 곳의 광원을 가지는 빛이다.
  • DirectionalLight ⇒ 태양과 같이 무한대의 먼 거리에서 모든 물체에 같은 각도로 비추는 빛이다.

// 조명 종류 : AmbientLight, PointLight, DirectionalLight
let light1 = new THREE.DirectionalLight(0xc5dafa, 15);
scene1.add(light1);
scene1.background = null;
renderer1.outputEncoding = THREE.sRGBEncoding; // 정확한 색상을 랜더링하기 위해 설정
renderer1.setClearColor( 0x000000, 0 ); // 배경 투명하게

• 모션 효과

let loader1 = new GLTFLoader();
loader1.load('porsche/scene.gltf', function(gltf) { // gltf에 자동차 들어있음
     scene1.add(gltf.scene);
     renderer1.render(scene1, camera1);

     function animate1() {
         requestAnimationFrame(animate1)
         gltf.scene.rotation.y -= 0.008;
         renderer1.render(scene1, camera1);
     }
     animate1();
})

마우스컨트롤 필요 시- Three.js 내 OrbitControl을 활용하면 된다고 한다.

---

영상을 보며 자동차 3D 모델을 골라 실습을 따라해보다가, 이미지와 함께 자동차를 소개하는 페이지를 만들면 어떨까 싶어레퍼런스를 찾아보았다. 마침 자동차가 포르쉐 모델이었어서, 해당 차량에 대한 정보를 알려주고 포르쉐의 자동차 모델을 한번에 보여주는 블록까지 만들어보자고 생각했다.

포르쉐 코리아의 페이지와 dribbble에서 찾은 차 광고 페이지를 참고하여 퍼블리싱을 진행했다.

 

첫번째 블록에서는 해당 자동차의 가격과 디테일을 확인할 수 있도록 했다.

예전에 알게 된 웹 디자인 사이트를 통해 그라데이션 배경을 추가하고, 비스듬한 구분선을 추가했다.

자동차는 외형을 한번에 보는 부분, 디테일을 확인할 수 있는 부분을 나타내기 위해 카메라 거리를 조정해주었다.

두번째 블록은 포르쉐 공식 사이트에 있는 버튼 블럭을 참고해 클론 코딩해보았다.

실제로 페이지가 이동되지는 않으며 hover 시 배경 색상이 바뀌도록 효과를 주었다.

마지막 블럭은 다양한 포르쉐의 모델을 구경할 수 있는 갤러리 형태로 나타내었다. unsplash 사이트에 있는 포르쉐 사진을 모아 grid로 나타내보았다.

CSS Grid로 영역 나누기

• 부모컨테이너에서 영역을 나눠준다.

grid-template-areas: {
   ‘a a a’
   ‘b c c’
   ‘b d g’
   ‘e f g’
}

• 자식 컨테이너에서 해당하는 이미지가 어떤 영역에 지정되게 할지 정해준다.

.image1 {
	grid-area: a;
}

그이후 이미지를 나눈 블럭에 꽉 차게 지정해주면 끝!

.image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

 

완성된 사이트 구경하기

Porsche 911 (goeun208.github.io)

Porsche 911

미니 프로젝트를 통해 웹 페이지에 3D 모델을 띄워볼 수 있는 좋은 기회였고 Three.js를 통해 물체를 띄우려면 카메라, 조명, 배경이 있어야 한다는 점을 배웠다. 갤러리를 만들면서 CSS의 Grid 속성에 대해서도 복습할 수 있어서 유용했다!! 

 

전체 코드: https://github.com/goeun208/porsche-example

GitHub - goeun208/porsche-example: Three.js를 활용한 포르쉐 소개 페이지