[WEBGL] three.js로 TIstory 블로그에 3D 렌더링 하기 (feat. 나를 관심사를 소개하는 도형 예제)

최근에 친구가 어떤 브랜드의 홈페이지가 이쁘고 신기하다면서 링크를 해주었는데 링크 들어가보니 3D가 구현이 되어 있고 동적으로 마우스 이벤트에도 반응을 하고 신기해서 어떻게 구현을 했는지 소스를 보다 three.js라는 라이브러리가 있어서 찾아보았습니다.

https://threejs.org/

three.js – JavaScript 3D library

한번 찾아보고 공부를 해보니 이 라이브러리는 기존 구현이 복잡한 WEBGL 기술을 간단한 코드만으로 구현이 가능하게 해주는 라이브러리 였습니다.

공식 예제들도 제공을 해줘서 구경을 하다 이런 것도 구현이 가능하구나 하면서 놀라게 되면서 한번 만들어보자! 하고 예제들을 분석하면서 만들기 시작 했습니다.

https://threejs.org/examples/#webgl_loader_gltf

일단 공부 하면서 간단하게 정리 한 내용입니다.

const renderer = new THREE.WebGLRenderer(); -> WebGL 렌더링을 위한 객체

document.body.appendChild(renderer.domElement); -> 레더링 객체를 body에 추가

const scene = new THREE.Scene(); -> 화면에 보여질 장면 객체를 생성

const camera = new THREE.PerspectiveCamera(
        30, // Field of view
        80 / 64, // Aspect ratio
        0.1, // Near
        100 // Far
      );

-> 화면을 바라보는 카메라 객체 생성

camera.position.set(10, 10, 10); -> 카메라의 포지션을 지정

camera.lookAt(scene.position); -> 카메라의 시점을 지정

Object 생성

1. Object의 형태를 생성

   const geometry = new THREE.BoxGeometry(5, 5, 5);

2. Object의 질감을 생성

   const material = new THREE.MeshLambertMaterial({ color: 0xcfd000 });

3. 형태와 질감을 합쳐서 Object 완성

   const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh); -> 장면에 Object 추가

빛 객체 생성

1. 빛 객체 생성

   const light = new THREE.PointLight(0xffff00);

2. 빛 객체의 위치 설정

   light.position.set(15, 15, 15);

3. 장면에 추가

   scene.add(light);

화면 렌더링

renderer.render(scene, camera);

에니메이션을 위한 리렌더링 작업

const animate = () => {
        requestAnimationFrame(animate);

        /*
        *    에니메이션 동작
        */

        renderer.render(scene, camera);
      };

대략적으로 이런형태로 사용을 하게 된다는 것만 가볍게 이해를 하고 그다음 예제 코드를 가지고 수정을 하면서 만들어 봤습니다.

아래의 내용은 설명을 해볼려고 해봤지만 주석도 안하고 작성하고 제가 아직 정확하게 설명하기가 어렵고 하드 코딩 해서 소스코드 링크를 남겼습니다. 확인 해보시고 궁금하신거 있으시면 댓글이나 깃허브 코멘트로 알려주세요.

https://gist.github.com/JaeSeoKim/47a73ad122fa232cc969023d95652220

three.js - rotation geometry, css2d

TIstory에 일단 Three.js 사용하는 라이브러리 파일들을 스킨수정 html 수정 파일 업로드를 통해 업로드를 한 뒤 그다음 불러올때 그 주소를 기반으로 사용하게 함으로 CORS 오류는 해결을 하고 글 작성에서 HTML 수정을 통해 직접 삽입 하여 적용 하였습니다.

아래의 내용은 WEBGL 을 지원 하는 브라우저에서만 보입니다. ex) 익스플로어 X

안보이시는 분은 아래 더보기를 눌러서 확인 해주세요.