chatGPT 코드생성→jsfiddle.net
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Dancing Cookies</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Three.js 기본 설정
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);
JavaScript
복사
// 조명 추가
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
// 쿠키를 담을 배열
const cookies = [];
// 쿠키 생성 함수
function createCookie(x, y, color) {
const cookieGeometry = new THREE.CylinderGeometry(2, 2, 0.5, 32);
const cookieMaterial = new THREE.MeshStandardMaterial({ color: color });
const cookie = new THREE.Mesh(cookieGeometry, cookieMaterial);
cookie.position.set(x, y, 0);
scene.add(cookie);
cookies.push(cookie);
}
// 쿠키 6개 생성 (초기 위치와 색상 지정)
createCookie(-5, -5, 0xd2b48c); // 색상: tan
createCookie(5, -5, 0xffa07a); // 색상: light salmon
createCookie(-5, 5, 0xdeb887); // 색상: burlywood
createCookie(5, 5, 0xcd853f); // 색상: peru
createCookie(0, -7, 0xf4a460); // 색상: sandy brown
createCookie(0, 7, 0xe9967a); // 색상: dark salmon
// 카메라 위치 설정
camera.position.z = 15;
// 애니메이션 함수
function animate() {
requestAnimationFrame(animate);
// 쿠키들을 각각 다른 패턴으로 움직이도록 설정
cookies.forEach((cookie, index) => {
// 회전 애니메이션
cookie.rotation.y += 0.05;
cookie.rotation.x += 0.02;
// 각 쿠키의 이동 패턴을 다르게 설정
const time = Date.now() * 0.001;
if (index % 2 === 0) {
cookie.position.x += Math.sin(time + index) * 0.05;
cookie.position.y += Math.cos(time + index) * 0.05;
} else {
cookie.position.x += Math.cos(time + index) * 0.05;
cookie.position.y += Math.sin(time + index) * 0.05;
}
});
renderer.render(scene, camera);
}
// 애니메이션 시작
animate();
// 화면 크기 변경 시 카메라 및 렌더러 크기 조정
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
Plain Text
복사
</body>
</html>