Reveal.js는 웹 기반의 프레젠테이션 프레임워크로써, HTML, CSS, JavaScript를 이용하여 동적이고 인터랙티브한 프레젠테이션을 만들 수 있습니다. 이번에는 Reveal.js에 WebGL을 이용하여 3D 효과를 추가하는 방법에 대해 알아보겠습니다.

Reveal.js에 WebGL 효과를 추가하는 방법

1. Reveal.js 설치하기

먼저, Node Package Manager (NPM)을 사용하여 Reveal.js를 설치합니다. 명령 프롬프트나 터미널에서 다음 명령을 실행합니다.

npm install reveal.js

1. WebGL 라이브러리 추가하기

WebGL을 사용하기 위해 Three.js와 같은 WebGL 라이브러리를 추가해야 합니다. Reveal.js와 함께 사용하기 위해 다음과 같은 스크립트 태그를 HTML 파일에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

1. 슬라이드에 WebGL 3D 효과 추가하기

이제 Reveal.js 슬라이드에 WebGL 3D 효과를 추가할 수 있습니다. 먼저, 프레젠테이션을 초기화하는 JavaScript 코드를 작성합니다.

Reveal.initialize({
  // Reveal.js 설정
});

그리고, WebGL을 초기화하고 3D 객체를 생성하는 코드를 작성합니다.

var scene, camera, renderer, cube;

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  var geometry = new THREE.BoxGeometry();
  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  
  camera.position.z = 5;
}

function animate() {
  requestAnimationFrame(animate);
  
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  
  renderer.render(scene, camera);
}

init();
animate();

위의 코드는 Reveal.js 슬라이드에서 WebGL을 초기화하고, 큐브를 생성하여 회전시키는 코드입니다. 필요한 경우 자신의 프로젝트에 맞게 코드를 커스터마이즈할 수 있습니다.

1. 슬라이드에 WebGL 효과 적용하기

슬라이드의 특정 부분에 WebGL 효과를 적용하기 위해서는 data-background-interactive 속성을 사용합니다. 다음과 같이 슬라이드 HTML 요소에 속성을 추가합니다.

<section data-background-interactive>
  <!-- 슬라이드 내용 -->
</section>

이제 해당 슬라이드에서 WebGL 3D 효과가 작동될 것입니다.

결론

Reveal.js에 WebGL을 활용한 3D 효과를 추가하는 방법에 대해 알아보았습니다. 이를 통해 Reveal.js 프레젠테이션에 동적이고 멋진 3D 효과를 쉽게 추가할 수 있습니다.

관련 참고 자료:

• Reveal.js
• Three.js