What’s on our mind?

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

 *
//화면 생성
    let scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0xFFBD00, 8, 30);

    //카메라 설정
    let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    //렌더링 설정
    let renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
    document.body.appendChild(renderer.domElement);
    
    //모양 설정
    let materials = [
        new THREE.MeshBasicMaterial({color:0xFF61AD, wireframe:true}),
        new THREE.MeshBasicMaterial({color:0xFF5BDB, wireframe:true}),
        new THREE.MeshBasicMaterial({color:0xFFAC63, wireframe:true}),
        new THREE.MeshBasicMaterial({color:0xFF8282, wireframe:true})
    ];
    let geometry = new THREE.IcosahedronGeometry(1, 1);
    
    for (let i = 0; i < 20; i ++) {
        const mesh = new THREE.Mesh(geometry, materials[Math.floor(Math.random() * 4)]);
        const scale = Math.random() + 0.5;
        mesh.scale.multiplyScalar(scale);
        mesh.position.random().subScalar(0.5).multiplyScalar(15);
        mesh.speed = new THREE.Vector3().random().subScalar(0.5).multiplyScalar(0.01);
        scene.add(mesh);
    }

    //애니메이션 설정
    function animate() {
        requestAnimationFrame(animate);

        scene.children.forEach(mesh => {
            mesh.rotation.x += mesh.speed.x;
            mesh.rotation.y += mesh.speed.y;
            mesh.rotation.z += mesh.speed.z;

            scene.rotation.x += 0.0001;
            scene.rotation.y += 0.0001;
            scene.rotation.z += 0.0001;
        });

        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);