What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View


//변수 설정
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);