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.FogExp2(0x1E2630, 0.002);

    //카메라 설정
    let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000)
    camera.position.x = 200;
    camera.position.y = 150;
    camera.position.z = 300;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    scene.add(camera);

    //렌더링 설정
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setClearColor(scene.fog.color);
    document.body.appendChild(renderer.domElement);

    //메쉬 설정
    const material = new THREE.MeshPhongMaterial({
        color: 0xfb3550,
        shading: THREE.FlatShading
    });
    let geometry = new THREE.IcosahedronGeometry(700, 1);
    const domeMaterial = new THREE.MeshPhongMaterial({
        color: 0xfb3550,
        shading: THREE.FlatShading,
        side: THREE.BackSide
    });
    const dome = new THREE.Mesh(geometry, domeMaterial);
    scene.add(dome);

    //cone
    geometry = new THREE.CylinderGeometry(0, 10, 60, 8);
    geometry.rotateX(Math.PI / 2);
    const cylinder = new THREE.Mesh(geometry, material.clone());
    cylinder.position.set(-90, 70, 30);
    cylinder.up.set(0, 0, 1);
    scene.add(cylinder);

    camera.lookAt(cylinder.position);

    const geometry2 = new THREE.IcosahedronGeometry(20, 1);
    const icosahedron = new THREE.Mesh(geometry2, material.clone());
    scene.add(icosahedron);
   

    //조명 설정
    light = new THREE.DirectionalLight(0xffffff);
    light.position.set(1, 1, 1);
    scene.add(light);
    light = new THREE.DirectionalLight(0x002288);
    light.position.set(-1, -1, -1);
    scene.add(light);
    light = new THREE.AmbientLight(0x222222);
    scene.add(light);

    // 도움 설정
    const axis = new THREE.AxisHelper(50);
    scene.add(axis);
    const gridXZ = new THREE.GridHelper(500, 10);
    scene.add(gridXZ);

    //애니메이션 설정
    function animate(t) {
        requestAnimationFrame(animate);
        
        icosahedron.position.x = cylinder.position.x + Math.cos(t / 752) * 100;
        icosahedron.position.y = cylinder.position.y + Math.sin(t / 438) * 100;
        icosahedron.position.z = cylinder.position.z + Math.sin(t / 678) * 100;

        cylinder.lookAt(icosahedron.position);
    
        renderer.render(scene, camera);
    }
    animate(0);

    //화면 사이즈 설정
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    window.addEventListener('resize', onWindowResize);