//변수 설정
const params = {
rx: 0,
ry: 0,
rz: 0,
}
const degreesToRadians = (degrees) => {
return degrees * (Math.PI / 180)
}
//화면 생성
const scene = new THREE.Scene();
//카메라 설정
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 5
//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
//지오메트리
const material = new THREE.MeshNormalMaterial()
const geometry = new THREE.OctahedronGeometry()
const shapes = [];
const textGroup = new THREE.Group()
scene.add(textGroup)
for(i = 0; i < 200; i++) {
const shape = new THREE.Mesh(geometry, material)
textGroup.add(shape)
shape.position.x = (Math.random() - 0.5) * 5
shape.position.y = (Math.random() - 0.5) * 5
shape.position.z = (Math.random() - 0.5) * 5
const scale = Math.random() / 5
shape.scale.set(scale, scale, scale)
shape.rotation.x = Math.random() * Math.PI
shape.rotation.y = Math.random() * Math.PI
shapes.push(shape)
}
// 조명
const lightAmbient = new THREE.AmbientLight(0x9eaeff, 1)
scene.add(lightAmbient)
gsap.to(params, {
rx: degreesToRadians(30),
ry: degreesToRadians(30),
z: degreesToRadians(30),
repeat: -1,
duration: 20,
ease: 'none'
})
//애니메이션 설정
var clock = new THREE.Clock();
function animate(a) {
requestAnimationFrame(animate);
textGroup.rotation.x = params.rx
textGroup.rotation.y = params.ry
renderer.render(scene, camera);
}
animate();
//화면 사이즈 설정
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);