What’s on our mind?

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


	//변수 설정 
    let t = 0, 
        count = 0, 
        cameraDx = 0.05, 
        frame = 0;

    //화면 생성
    let scene = new THREE.Scene();
    // scene.background = new THREE.Color("#000000");
    scene.fog = new THREE.Fog("#3c1e02", 0.5, 50);

    //카메라 설정
    let camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000)
    camera.position.set(0, 1, 32);

    //렌더링 설정
    renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);

    //조명 설정
    let pointLight1 = new THREE.PointLight("#ffffff", 1, 0);
    pointLight1.position.set(0, 30, 30);
    scene.add(pointLight1);

    //라인 설정
    let lineTotal = 1000;
    let linesGeometry = new THREE.BufferGeometry();
    linesGeometry.setAttribute("position", new THREE.BufferAttribute(new Float32Array(6 * lineTotal), 3));
    linesGeometry.setAttribute("velocity", new THREE.BufferAttribute(new Float32Array(2 * lineTotal), 1));
    let l_positionAttr = linesGeometry.getAttribute("position");
    let l_vertex_Array = linesGeometry.getAttribute("position").array;
    let l_velocity_Array = linesGeometry.getAttribute("velocity").array;

    //행성 설정
    const loader = new THREE.TextureLoader();
    const texturePlanet = loader.load('https://i.ibb.co/h94JBXy/saturn3-ljge5g.jpg');
    texturePlanet.anisotropy = 16;
    const planetGeometry = new THREE.SphereBufferGeometry(10, 50, 150);
    const planetMaterial = new THREE.MeshLambertMaterial({map:texturePlanet, fog:false});
    let planet = new THREE.Mesh(planetGeometry, planetMaterial);
    planet.position.set(0, 8, -30);
    scene.add(planet);

    //달 설정
    const textureMoon = loader.load('https://i.ibb.co/64zn361/moon-ndengb.jpg');
    textureMoon.anisotropy = 16;
    let moonGeometry = new THREE.SphereBufferGeometry(2, 32, 32);
    let moonMaterial = new THREE.MeshPhongMaterial({map:textureMoon, fog:false});
    let moon = new THREE.Mesh(moonGeometry, moonMaterial);
    moon.position.set(0, 8, 0);
    scene.add(moon);

    //배경 라인 설정
    const textureTerrain = loader.load();
    textureTerrain.rotation = THREE.MathUtils.degToRad(5);

    let terrainGeometry = new THREE.PlaneBufferGeometry(70, 70, 20, 20);
    const terrainMaterial = new THREE.MeshBasicMaterial({
        map: textureTerrain,
        fog: true
    });

    let terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
    terrain.rotation.x = -0.47 * Math.PI;
    terrain.rotation.z = THREE.Math.degToRad(90);
    scene.add(terrain);

    let t_vertex_Array = terrainGeometry.getAttribute("position").array;
    terrainGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);

    terrainGeometry.setAttribute("myZ", new THREE.BufferAttribute(new Float32Array(t_vertex_Array.length / 3), 1));
    let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;

    for (let i = 0; i < t_vertex_Array.length; i++) {
        t_myZ_Array[i] = THREE.MathUtils.randInt(0, 5);
    }

    const terrain_line = new THREE.LineSegments(
        terrainGeometry,
        new THREE.LineBasicMaterial({
            color: "#fff",
            fog: false
        })
    );
    terrain_line.rotation.x = -0.47 * Math.PI;
    terrain_line.rotation.z = THREE.Math.degToRad(90);
    scene.add(terrain_line);
    
    //별 설정
    for (let i = 0; i < lineTotal; i++) {
        let x = THREE.MathUtils.randInt(-100, 100);
        let y = THREE.MathUtils.randInt(10, 40);
        if (x < 7 && x > -7 && y < 20) x += 14;
        let z = THREE.MathUtils.randInt(0, -300);

        l_vertex_Array[6 * i + 0] = l_vertex_Array[6 * i + 3] = x;
        l_vertex_Array[6 * i + 1] = l_vertex_Array[6 * i + 4] = y;
        l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = z;

        l_velocity_Array[2 * i] = l_velocity_Array[2 * i + 1] = 0;
    }
    let starsMaterial = new THREE.LineBasicMaterial({
        color: "#ffffff",
        transparent: true,
        opacity: 0.5,
        fog: false
    });
    let lines = new THREE.LineSegments(linesGeometry, starsMaterial);
    linesGeometry.getAttribute("position").setUsage(THREE.DynamicDrawUsage);
    scene.add(lines);



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

        //행성 
        planet.rotation.y += 0.002;

        //달
        moon.rotation.y -= 0.007;
        moon.rotation.x -= 0.007;
        moon.position.x = 15 * Math.cos(t) + 0;
        moon.position.z = 20 * Math.sin(t) - 35;
        t += 0.015;

        //배경 라인
        let t_vertex_Array = terrainGeometry.getAttribute("position").array;
        let t_myZ_Array = terrainGeometry.getAttribute("myZ").array;

        for (let i = 0; i < t_vertex_Array.length; i++) {
            if (i >= 210 && i <= 250) t_vertex_Array[i * 3 + 2] = 0;
            else {
                t_vertex_Array[i * 3 + 2] = Math.sin((i + count * 0.0003)) * (t_myZ_Array[i] - (t_myZ_Array[i] * 0.5));
                count += 0.1;
            }
        }

        //별 
        for (let i = 0; i < lineTotal; i++) {
            l_velocity_Array[2 * i] += 0.0049;
            l_velocity_Array[2 * i + 1] += 0.005;

            l_vertex_Array[6 * i + 2] += l_velocity_Array[2 * i];
            l_vertex_Array[6 * i + 5] += l_velocity_Array[2 * i + 1];

            if (l_vertex_Array[6 * i + 2] > 50) {
                l_vertex_Array[6 * i + 2] = l_vertex_Array[6 * i + 5] = THREE.MathUtils.randInt(-200, 10);
                l_velocity_Array[2 * i] = 0;
                l_velocity_Array[2 * i + 1] = 0;
            }
        }

        //카메라
        camera.position.x += cameraDx;
        camera.position.y = -1.2 * (1 - Math.abs(frame / 2000 - 0.5) / 0.5);
        camera.lookAt(0, 0, 0);
        frame += 8;
        if (frame > 2000) frame = 0;
        if (camera.position.x > 18) cameraDx = -cameraDx;
        if (camera.position.x < -18) cameraDx = Math.abs(cameraDx);

        l_positionAttr.needsUpdate = true;
        terrainGeometry.attributes.position.needsUpdate = true;

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