[html] 3D 웹 모델링 및 애니메이션 코딩
웹 개발에서 3D 그래픽을 사용하여 사용자들에게 더욱 풍부한 경험을 제공할 수 있습니다. 이번 글에서는 HTML, CSS, JavaScript 및 Three.js를 사용하여 3D 모델링을 만들고, 애니메이션을 추가하는 방법을 알아보겠습니다.
3D 웹 모델링
Three.js란?
Three.js는 웹 기반 3D 그래픽을 렌더링하는 데 사용되는 JavaScript 3D 라이브러리입니다. 이 라이브러리는 WebGL을 기반으로 하며, 3D 모델을 만들고 애니메이션을 추가할 때 매우 편리합니다.
3D 모델 생성
다음은 Three.js를 사용하여 3D 모델을 만드는 간단한 예제 코드입니다.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const 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);
}
animate();
이 예제는 Three.js를 사용하여 화면에 녹색의 3D 상자를 생성하고, 회전 애니메이션을 추가합니다.
애니메이션 코딩
TweenMax를 이용한 애니메이션
애니메이션을 추가하기 위해 GSAP (GreenSock Animation Platform)의 TweenMax를 사용할 수 있습니다. 다음은 TweenMax를 사용하여 3D 모델에 애니메이션을 추가하는 예제입니다.
TweenMax.to(cube.position, 2, { x: 2, ease: Power2.easeInOut });
이 코드는 2초 동안 cube의 x 좌표를 2만큼 변경하여 애니메이션을 만듭니다.
결론
이를 통해, 웹 개발자들은 Three.js 및 GSAP를 사용하여 웹 페이지에 3D 모델을 추가하고, 애니메이션을 쉽게 코딩할 수 있습니다. 이를 통해 사용자들에게 더욱 인상적이고 상호작용적인 경험을 제공할 수 있습니다.