Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Leeyanggoo

[CSS] 오늘도 지구는 돈다 본문

2023/CSS 효과

[CSS] 오늘도 지구는 돈다

Leeyanggoo 2023. 3. 24. 18:02

 

 

 <!DOCTYPE html>
 <html lang="ko">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl01</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: rgb(25,0,46);
            background: linear-gradient(90deg, rgba(25,0,46,0.8827906162464986) 0%, rgba(37,6,55,1) 50%, rgba(7,7,45,0.8099614845938375) 100%);
        }
    </style>
 </head>
 <body>
    <div id="canvas">

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
    <script>
        let renderer, scene, camera, composer, cicle, skelet, particle;
        window.onload = function(){
            init();
            animate();
        };

        function init(){
            renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
            renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.autoClear = false;
            renderer.setClearColor(0x000000, 0.0);
            document.getElementById("canvas").appendChild(renderer.domElement);
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 400;
            scene.add(camera);

            //원
            circle = new THREE.Object3D();
            skelet = new THREE.Object3D();
            particle = new THREE.Object3D();

            //화면 추가
            scene.add(circle);
            scene.add(skelet);
            scene.add(particle);

            let geom = new THREE.IcosahedronGeometry(7, 1);
            let mat = new THREE.MeshPhongMaterial({
                color: 0xffffff,
                shading: THREE.FlatShading
            });
            let planet = new THREE.Mesh(geom, mat);
            planet.scale.x = planet.scale.y = planet.scale.z = 16;
            circle.add(planet);

            //조명
            let lights = [];
            lights[0] = new THREE.DirectionalLight(0xffffff, 1);
            lights[0].position.set(1, 0, 0);
            lights[1] = new THREE.DirectionalLight(0x11e8bb, 1);
            lights[1].position.set(0.75, 1, 0.75);
            lights[2] = new THREE.DirectionalLight(0x8200c9, 1);
            lights[2].position.set(-0.75, -1, 0.5);
            scene.add(lights[0]);
            scene.add(lights[1]);
            scene.add(lights[2]);

            //조명 밝게
            let ambientLight = new THREE.AmbientLight(0x999999);
            scene.add(ambientLight);


            let geom2 = new THREE.IcosahedronGeometry(15, 1);
            let mat2 = new THREE.MeshPhongMaterial({
                color: 0xffffff,
                wireframe: true,
                side: THREE.DoubleSide
            });

            let planet2 = new THREE.Mesh(geom2, mat2);
            planet2.scale.x = planet2.scale.y = planet2.scale.z = 10;
            skelet.add(planet2);

            //1000
            let geometry = new THREE.TetrahedronGeometry(1, 0);
            let material = new THREE.MeshPhongMaterial({
                color: 0xffffff,
                shading: THREE.FlatShading
            })
            for(let i=0; i<1000; i++){
                let mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(Math.random() -0.5, Math.random() -0.5, Math.random() -0.5).normalize();
                mesh.position.multiplyScalar(90 + (Math.random() * 700));
                mesh.rotation.set(Math.random()*2, Math.random()*2, Math.random()*2);
                particle.add(mesh);
            }

            window.addEventListener("resize", onWindowResize, false);
        };

        function onWindowResize(){
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth / window.innerHeight);
        };

        function animate(){
            requestAnimationFrame(animate);

            circle.rotation.x -= 0.005;
            circle.rotation.y -= 0.005;
            
            skelet.rotation.x += 0.008;
            skelet.rotation.y += 0.008;

            particle.rotation.x += 0.005;
            particle.rotation.y += 0.006;

            renderer.clear();

            renderer.render(scene, camera);
        };
    </script>
 </body>
 </html>

 

'2023/CSS 효과' Related Articles more