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(0x5d0361, 10, 1500);

    //카메라 설정
    let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 0;
    camera.position.z = 500;
    camera.position.y = -10;

    //렌더링 설정
    let renderer = new THREE.WebGLRenderer({alpha: true, antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.getElementById("canvas").appendChild(renderer.domElement);
    
    //모양 설정
    let loader = new THREE.GLTFLoader();
    loader.load( "https://www.stivaliserna.com/assets/rocket/rocket.gltf",
        (gltf) => {
            rocket = gltf.scene;
            rocket.position.y = 50;
            scene.add(rocket);
        }
    );

    //조명 설정
    const ambientLight = new THREE.HemisphereLight(0x404040, 0x404040, 1);
    const directionalLight = new THREE.DirectionalLight(0xdfebff, 1);
    const pointLight = new THREE.PointLight(0xa11148, 2, 1000, 2);

    directionalLight.position.set(-300, 0, 600);
    pointLight.position.set(200, -100, 50);
    
    scene.add(ambientLight, directionalLight, pointLight);
    
    //별 설정
    let material = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 2,
        transparent: true,
        blending: THREE.AdditiveBlending
    });

    let particleCount = 15000;
    let particles = new THREE.Geometry();

    for (var i = 0; i < particleCount; i++) {
        var px = Math.random() * 2000 - 1000;
        var py = Math.random() * 2000 - 1000;
        var pz = Math.random() * 2000 - 1000;
        particle = new THREE.Vector3(px, py, pz);
        particle.velocity = new THREE.Vector3(0, Math.random(), 0);
        particles.vertices.push(particle);
    }

    let points = new THREE.Points(particles, material);
    points.sortParticles = true;
    scene.add(points);

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

        const t = (Date.now() % 2000) / 2000;
        renderer.render(scene, camera);

        const delta = 40 * Math.sin(Math.PI * 2 * t);
        if (rocket) {
            rocket.rotation.y += 0.1;
            rocket.position.y = delta;
        }

        var i = particleCount;
        while(i--){
            var particle = particles.vertices[i];

            if(particle.y > 1000){
                particle.y = -1000;
                particle.velocity.y = Math.random();
            }
            particle.velocity.y += Math.random() * 0.001;
            particle.add(particle.velocity);
        }
        points.geometry.verticesNeedUpdate = 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);