three.js를 사용하여 인터랙티브한 3D 페이지를 만들기 위해서는 몇 가지 기본 단계를 따라야 합니다. 아래는 간단한 예제 코드와 설명입니다.
1. three.js 라이브러리 추가하기
먼저, three.js를 HTML 문서에 추가해야 합니다. three.js는 CDN을 통해 불러올 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive 3D Page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// 여기에 three.js 코드를 추가합니다.
</script>
</body>
</html>2. Scene, Camera, Renderer 생성
three.js에서는 3D 장면(Scene), 카메라(Camera), 렌더러(Renderer)가 필요합니다.
// Scene 생성
const scene = new THREE.Scene();
// Camera 생성
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Renderer 생성
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);3. 3D 객체 추가
여기에서는 간단한 큐브를 추가합니다.
// Cube 생성
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
// Scene에 큐브 추가
scene.add(cube);4. 애니메이션 및 인터랙션 추가
예를 들어 회전하는 애니메이션을 추가하고, 마우스로 상호 작용할 수 있도록 합니다.
// 애니메이션 함수
const animate = () => {
requestAnimationFrame(animate);
// 큐브 회전
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
// 윈도우 크기 조정에 대한 이벤트 리스너 추가
window.addEventListener('resize', () => {
const newWidth = window.innerWidth;
const newHeight = window.innerHeight;
camera.aspect = newWidth / newHeight;
camera.updateProjectionMatrix();
renderer.setSize(newWidth, newHeight);
});
// 마우스로 회전 및 줌 기능 추가
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 애니메이션 호출
animate();이제 위의 코드를 참고하여 원하는대로 3D 객체를 추가하고 상호 작용을 구현할 수 있습니다. 세부적인 내용은 three.js의 문서와 예제를 참조하면 도움이 됩니다.
