What’s on our mind?

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

//변수 설정
    const colors = [0x37BE95, 0xF3F3F3, 0x6549C0];
    
    //화면 설정
    var scene = new THREE.Scene();

    //카메라 설정
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
    camera.lookAt(scene.position);
    camera.position.z = 500;
    scene.add(camera);

    //렌더링 설정
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x0E2255);
    renderer.shadowMap.enabled = true;
    document.body.appendChild(renderer.domElement);
    
    //조명 설정
    const ambientLight = new THREE.AmbientLight();
    scene.add(ambientLight);

    const light = new THREE.DirectionalLight();
    light.position.set(200, 100, 200);
    light.castShadow = true;
    light.shadow.camera.left = -100;
    light.shadow.camera.right = 100;
    light.shadow.camera.top = 100;
    light.shadow.camera.bottom = -100;
    scene.add(light);

    //파티클 설정
    function drawParticles() {
        particles = new THREE.Group();
        scene.add(particles);
        const geometry = new THREE.TetrahedronGeometry(5, 0);

        for (let i = 0; i < 500; i ++) {
            const material = new THREE.MeshPhongMaterial({
                color: colors[Math.floor(Math.random() * colors.length)],
                shading: THREE.FlatShading
            });

            const mesh = new THREE.Mesh(geometry, material);
            mesh.position.set((Math.random() - 0.5) * 1000, (Math.random() - 0.5) * 1000, (Math.random() - 0.5) * 1000);
            mesh.updateMatrix();
            mesh.matrixAutoUpdate = false;
            particles.add(mesh);
        }
    }
    drawParticles();

    //토성 설정
    function drawSaturn() {
        saturn = new THREE.Group();
        saturn.rotation.set(0.4, 0.3, 0);
        scene.add(saturn);

        const planetGeometry = new THREE.IcosahedronGeometry(100, 1);

        const planetMaterial = new THREE.MeshPhongMaterial({
            color: 0x37BE95,
            shading: THREE.FlatShading
        });
        const planet = new THREE.Mesh(planetGeometry, planetMaterial);

        planet.castShadow = true;
        planet.receiveShadow = true;
        planet.position.set(0, 40, 0);
        saturn.add(planet);

        const ringGeometry = new THREE.TorusGeometry(140, 12, 6, 15);
        const ringMeterial = new THREE.MeshStandardMaterial({
            color: 0x6549C0,
            shading: THREE.FlatShading
        });
        const ring = new THREE.Mesh(ringGeometry, ringMeterial);
        ring.position.set(0, 40, 0)
        ring.rotateX(80);
        ring.castShadow = true;
        ring.receiveShadow = true;
        saturn.add(ring);
    }
    drawSaturn();

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

        particles.rotation.x += 0.001;
        particles.rotation.y -= 0.004;
        saturn.rotation.y += 0.003;
        
		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);