What’s on our mind?

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

*
	//화면 생성
    let scene = new THREE.Scene();

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

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

    //메쉬 설정
    const material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        specular: 0x111111,
        shininess: 100,
        flatShading: true
    });
    const geometry = new THREE.TorusGeometry(0.3, 0.15, 20, 50)
    const torus = new THREE.Mesh(geometry, material);
    scene.add(torus);

    const sphereGeometry = new THREE.SphereGeometry(0.15, 20, 20);
    const sphereParent = new THREE.Object3D();
    const sphereOffset = 0.5;
    for (let i=0; i<4; i++) {
        const mesh = new THREE.Mesh(sphereGeometry, material);
        sphereParent.add(mesh);
    }
    sphereParent.position.x = -sphereOffset;
    sphereParent.children[0].position.x = sphereOffset;
    sphereParent.children[1].position.x = -sphereOffset;
    sphereParent.children[2].position.z = sphereOffset;
    sphereParent.children[3].position.z = -sphereOffset;

    const group = new THREE.Group();
    group.add(sphereParent, torus);
    scene.add(group);

    //조명 설정
    const light = new THREE.DirectionalLight(0x1e90ff);
    const shine = new THREE.SpotLight(0xfff00);
    light.position.set(1, 1, 0);
    shine.position.set(0, 0, 1);
    scene.add(light, shine);

    //애니메이션 설정
    function animate() {
        requestAnimationFrame(animate);
        
        sphereParent.rotation.y += 0.01;
        group.rotation.x += 0.01
        group.rotation.y += 0.02

        shine.position.x = Math.sin(0) * 100;
        shine.position.y = Math.cos(0) * 100;
    
        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);